E企盈营销工具技术服务商 热线:4006-838-530

详细的微信小程序学习笔记(从入门到项目)(1)

E企盈直播平台营销卖货系统

微信小程序(1)准备工作1 获取 AppID(小程序ID)登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取.  进行小程序的注册.  选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击开发设置 进行获取  AppID(小程序ID)2 下载安装开发工具开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html创建一个自己的微信小程序完成上面之后,我们就拥有了一个 appID 与工具.点击打开,工具 根据下面的信息进行填写,记的保证自己的版本的更新了解工具的日常使用与文件构成切换开发模式当我们工作中在开发小程序的同时也在开发微信公众号 , 则必须进行切换开发者模式, 在顶部微信开发者工具中_–> 有更换开发者模式–>公众号网页调试新增和修改编译模式当我们需要修改 初始化时 显示的页面时, 则需要进行更改启动页面. 我们可以通过在 app.json 中的 pages 中 切换路径的顺序进行 切换(不推荐). 或者通过 在编译模式下 新增一个编译模式. 进行 切换.预览和真机调试预览调试:开发者可以通过手机扫描预览提供的二维码来访问小程序真机调试:和预览一样会提供访问的二维码,不同的是真机调试模式会弹出控制台,可以查看手机模式下的调试信息清除缓存有选项的删除 缓存信息 清除本地的授权记录、sessionStorage和localStorage等缓存数据 . 右上角详情则可以查看自己依赖的库是什么版本, 版本过低可能会影响使用注意版本库的选择,不要轻易去修改这个配置,很容易导致项目的api不兼容小程序的文件结构介绍基本的结构- pages // 包含了所有页面- index // 页面文件夹- index.js    // 页面的脚本逻辑文件- index.wxml  // 页面模板文件- index.wxss  // 页面样式文件- index.json  // 页面配置文件 —>(重要)-如果有其他页面, 会在此生成- utils // 普通的工具函数 –>(不需要注意)- app.js   // 项目启动入口- app.json // 全局的配置  —>(重要)- app.wxss // 全局样式- project.config.json // 项目的配置文件和web的页面结构比较:文件  小程序  web         模板  .wxml.html       样式  .wxss.css        脚本  .js  .js/script标签注意:微信小程序页面目录下,.js 和  .wxml 文件是必需的项目的json文件配置参考文档的地址Titlepages配置pages 数组中的页面路径地址必须存在pages文件夹中pages 数组中的页面路径地址下标为0,也就是第一个路径在普通编译模式下会作为启动页面,但不建议使用更换顺序的方式修改启动页, 可以通过新增或修改编译模式更改启动页window配置示例// app.json{  “window”:{    “navigationBarBackgroundColor”: “#fff”, // 导航栏背景颜色     “navigationBarTextStyle”: “black”,      // 导航栏标题颜色,仅支持 black / white    “navigationBarTitleText”: “weChart”,    // 导航栏标题文字内容    “backgroundColor”: “#fff”,// 窗口的背景色    “backgroundTextStyle”: “light”,// 下拉 loading 的样式,仅支持 dark / light    “enablePullDownRefresh”: true// 设置允许下拉刷新  }}注意: window的配置1. navigationBarTextStyle导航栏标题颜色,仅支持 black / white2. backgroundTextStyle下拉 loading 的样式,仅支持 dark / lighttab Bar 配置示例// app.json{  “tabBar”: {  “color”: “#000”,// tab 上的文字默认颜色  “selectedColor”: “#000”,// tab 上的文字选中时的颜色  “backgroundColor”: “#f5f5f5”,// tab 的背景色    “list”: [{      “pagePath”: “pages/index/index”,// 页面路径,必须在 pages 中先定义(必填)      “text”: “首页”,// tab 上按钮文字(必填)      “iconPath”: “”,// tab 上的图片路径,不支持网络图片      “selectedIconPath”: “”// 选中时的图片路径    }, {      “pagePath”: “pages/logs/logs”,      “text”: “日志”,      “iconPath”: “”,      “selectedIconPath”: “”    }]  }}注意:配置了tabBar后,底部栏只对配置的页面可见, 而且tabBar的设置至少两个,最多5个WXML 模板文件和组件新建页面1 通过app.json来新建    2  编辑器手动创建wxml和html的不同点标签名字不一样,如html里常用的标签 div、a、span等,在小程序里标签是view、navigator、text等,除了常用的元素块标签,小程序还提供了地图,视频,音频等组件可以通过表达式{{  }}渲染状态数据组件(不称为标签称为组件)组件文档地址 Title组件共同属性类型所有组件都有的属性:属性名           类型          描述     注解                   id            String      组件的唯一标示保持整个页面唯一            class         String      组件的样式类 在对应的 WXSS 中定义的样式类   style         String      组件的内联样式可以动态设置的内联样式          hidden        Boolean     组件是否显示 所有组件默认显示             data-*        Any (任意属性)  自定义属性  组件上触发的事件时,会发送给事件处理函数bind* / catch*EventHandler组件的事件  详见事件                组件的介绍view (块级容器相当于 div)<view class=”container”><!– 页面内容 –></view>text (相当于 sapn) 注意: span中可以放置div 虽然不推荐, 但是 text 只能 放置其 自己基础库版本低于 2.1.0 时, text 组件内嵌的 style 设置可能不会生效text组件内只支持 text 嵌套除了文本节点以外的其他节点都无法长按选中navigator注意: 0  navigator是不能跳转至 外部链接的1  wep 中的a标签使用的是href 但是 微信小程序的组件 中的 则是 url 2 注意点是, 需要使用 绝对路径  ( / )  在url前加 / 3 当你的 tabBar中 有使用 了哪个 页面的路径 需要跳转的话 必须添加 open-type :’ switchTab ‘   不然不会起作用open-type 常用的有效值redirect   覆盖当前页面switchTab  跳转到tabBar页navigateBack  关闭当前页面,返回上一页面 ( 设置这个值的话, 当你单击这个链接时会关闭当前的页面, 跳转回上一页面  但是 跳转的页面两个都有 在tabBar 就不能返回的)<navigator url=”/pages/demo/domo”>跳转到demo</navigator>image图片组件image的基本使用<image style=”width: 200px; height: 200px;mode=”aspectFill” src=”图片地址”></image>注意:image组件默认宽度300px、高度240px 注2:image组件中二维码/小程序码图片不支持长按识别常用的mode 有效值scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来注意:微信朋友圈和QQ的说说页的图片裁剪方式,可以通过设置 `mode=aspectFill` 实现类似功能form表单组件form组件包含了以下常用的子组件   input 输入框组件   label 表单字段说明组件   checkbox 多项选择器组件   radio  单项选择器组件   button 按钮组件  上述表单的子组件除了button都有name属性,给表单提供字段名的映射input输入框组件input的简单使用<input placeholder=”请输入文字” type=”text”/>input常用的属性  属性         类型     默认值   说明         value      String       输入框的初始内容  type       String “text”input 的类型 password   Booleanfalse 是否是密码类型   placeholderString       输入框为空时占位符 disabled   Booleanfalse 是否禁用     input type 有效值值     说明               text  文本输入键盘           number数字输入键盘 (手机号码)    idcard身份证输入键盘          digit 带小数点的数字键盘(输入金额常用)checkbox多选项和radio单选项的使用当两个存在多个可选项时候需要使用checkbox-group或者radio-group进行包裹—–>   不包裹的话会出现问题(比如单选框可以选中多个)  文档中有许多属性–> 更改颜色 选中状态等checkbox组件文档: Titleradio组件文档: Titlebutton 按钮组件button常用的属性 属性       类型     默认值    说明                                      size     String default按钮的大小 ( mini)                           type     String default按钮的样式类型  (  primary绿色   warn 红色)        disabled Booleanfalse  是否禁用                                    loading  Booleanfalse  名称前是否带 loading 图标                       form-typeString        用于form组件,可选值 submit/reset,触发form的提交和reset事件form表单组件form表单基本提交案例第一步,设置button form-type=’submit第二步,通过bindsubmit设置form的提交事件处理函数// wxml<form bindsubmit=”formSubmit”><input type=”text” name=”username” placeholder></input><button form-type=”submit”>提交</button></form>// js 中 配置 函数formSubmit: function(e){    console.log(e.detail.value)  }wxss样式WXSS 对 CSS 进行了扩充以及修改,与 CSS 相比,WXSS 扩展的特性有:尺寸单位样式导入选择器rpx 尺寸单位  rpx可以使元素根据屏幕宽度进行自适应,小程序规定屏幕的宽度为750rpx, 也就是 100% = 750rpx; 50% = (750 / 2)rpx其他自适应方法web中使用rem,vw, 百分比使用方法在开发小程序是建议使用750像素宽度的设计稿,这样设计稿的元素宽度是多少像素就直接设置为多少rpx注意1rpx在某些屏幕上可能无效样式导入基本概念通过@import导入外部的样式导入方法,参考weui-wxss提供的例子:// 地址:https://github.com/Tencent/weui-wxss/blob/master/dist/app.wxss@import ‘style/weui.wxss’;选择器参考css中的选择器, 详细的文档地址:Title1. 完成微信小程序注册,获取APPID2. 掌握微信开发者工具下载,安装和基本使用3. 掌握小程序的文件构成,json 配置文件,wxml 结构文件,wxss 样式文件,js 脚本文件4. 掌握小程序 json 配置文件配置 pages 注册页面5. 掌握小程序 json 配置文件配置 window 导航条、标题6. 掌握小程序 json 配置文件配置 tabBar7. 掌握 text 文本组件的使用,实现文字选中,文字换行8. 掌握 navigator 导航组件的使用,实现小程序内部跳转,tabBar 切换9. 掌握 image 图片组件的使用,实现图片等比例缩放10. 掌握 view 容器组件的使用,注意小程序无语义化标签概念11. 掌握 button,input,radio,checkbox 常用表单组件使用12. 掌握 input 输入框组件 text,number,idcard,digit 四种类型的使用13. 掌握微信开发者工具的调试器,Console 面板查看报错,Wxml 面板查看结构与样式微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 详细的微信小程序学习笔记(从入门到项目)(1)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏