微信小程序优势
- 微信有海量用户，而且用户粘性高，在微信里开发产品更容易触达用户
- 微信小程序具有无需安装，扫码即用的特性，相比App推广成本更低
- 低廉的开发成本，较好的体验
0.环境准备
注册小程序
微信小程序有别于
web应用，web应用通常由自己管理发布，但是微信小程序由微信统一管理，因此需要注册账号。 注册地:mp.weixin.qq.com/wxopen/ware…
获取AppID
AppID是微信小程序的身份标记，后期开发中需要调用开放接口，发布应用都需要用到AppID。 可登录微信公众平台 进入“开发” -- “开发设置” 获取AppID
下载开发者工具
微信开发者文档:developers.weixin.qq.com/miniprogram… 微信开发者工具集开发，预览，调试，发布于一身。
1.开始微信小程序
登录微信开发者工具
填写项目信息
详细使用:developers.weixin.qq.com/miniprogram… 可以不使用"云服务",不然会有很多文件
成功
2.小程序结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生
APP体验的服务。 小程序提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
小程序文件结构和传统web对比
通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json
| 结构 | 传统web | 微信小程序 |
|---|---|---|
| 结构 | HTML | WXML |
| 样式 | CSS | WXSS |
| 逻辑 | Javascript | Javascript |
| 配置 | 无 | JSON |
3.小程序配置文件
3.1全局配置app.json
- 小程序配置:developers.weixin.qq.com/miniprogram…
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的app.json配置
pages字段
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 有优先顺序,第一位默认为首页.
window字段
window字段 —— 定义小程序所有页面(全局配置)的顶部背景颜色，文字颜色定义等。 完整的配置信息参考:developers.weixin.qq.com/miniprogram…
3.2页面配置pages/index.json
- 这里的
page.json其实用来表示页面目录下的page.json这类和小程序页面相关的配置。- 开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
- 页面的配置只能设置
app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。- 更多配置:developers.weixin.qq.com/miniprogram…
4.小程序样式配置
4.1全局样式配置app.wxss
- 这里的
view作用等同于div
4.2页面样式配置pages/index.wxss
跟以往
css一样,全局样式可以给所有页面使用，局部样式优先级高于全局样式，如果出现相同属性，局部样式覆盖全局样式
5.模板语法
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 更多模板语法:developers.weixin.qq.com/miniprogram…
4.1数据绑定
普通写法&运算
跟
vue差不多
boolean 类型
多选框文档 小程序的写法是在
""里面加{{}}
4.2循环语法
数组
wx:for="{{数组}}"默认数据内容item，默认索引index- 使用
wx:for-item可以指定数组当前元素的变量名，- 使用
wx:for-index可以指定数组当前下标的变量名：- 类似
block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块,block是一个空标签，可以用来写循环标签，或者判断标签都可以，他不会出现在页面上
wx:key="字符串"wx:key="*this"
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
<block wx:for="{{userinfo}}" wx:key="index">{{item}} {{index}}</block>
<block wx:for="{{userinfo}}" wx:key="*this">{{item}} {{index}}</block>
<block wx:for="{{userinfo}}" wx:key="item">{{item}} {{index}}</block>
对象
默认情况下.
item表示对象的属性值,index表示对象的key值
4.3条件渲染
wx:if
hidden
为真隐藏,为假显示.类似vue的v-show,在vue中v-if是直接在dom销毁,v-show是隐藏.这里两者的区别也等同
4.4小程序事件绑定
事件绑定:developers.weixin.qq.com/miniprogram… vue中的写法是v-on或@,小程序是用bind后加上事件类型,以前是在methed处理事件,小程序是直接写在page里面. 传参是
data-自定义名='值'
4.5输入框绑定事件
6.WXSS
指路:developers.weixin.qq.com/miniprogram… 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位:rpx（responsive pixel）: 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx,意思是无论屏幕多大就是750rpx,类似rem
rpx
对比绝对单位px,
7.图片组件
图片组件:developers.weixin.qq.com/miniprogram… 使用
mode:'类型'设置图样样式
