微信小程序从0到1基础学习整理(上)

微信小程序优势

1. 微信有海量用户，而且用户粘性高，在微信里开发产品更容易触达用户
2. 微信小程序具有无需安装，扫码即用的特性，相比App推广成本更低
3. 低廉的开发成本，较好的体验

0.环境准备

注册小程序

微信小程序有别于web应用，web应用通常由自己管理发布，但是微信小程序由微信统一管理，因此需要注册账号。
注册地:https://mp.weixin.qq.com/wxopen/waregister?action=step1

获取AppID

AppID是微信小程序的身份标记，后期开发中需要调用开放接口，发布应用都需要用到AppID。
可登录微信公众平台 进入“开发” – “开发设置” 获取AppID

下载开发者工具

微信开发者文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信开发者工具集开发，预览，调试，发布于一身。

1.开始微信小程序

登录微信开发者工具

填写项目信息

详细使用:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
可以不使用"云服务",不然会有很多文件

成功

2.小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

小程序文件结构和传统web对比

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

3.小程序配置文件

3.1全局配置app.json

• 小程序配置:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
• app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

pages字段

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
有优先顺序,第一位默认为首页.

window字段

window字段 —— 定义小程序所有页面(全局配置)的顶部背景颜色，文字颜色定义等。
完整的配置信息参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

3.2页面配置pages/index.json

• 这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。
• 开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
• 页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
• 更多配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

4.小程序样式配置

更多样式配置地址:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

4.1全局样式配置app.wxss

• 这里的view作用等同于div

4.2页面样式配置pages/index.wxss

跟以往css一样,全局样式可以给所有页面使用，局部样式优先级高于全局样式，如果出现相同属性，局部样式覆盖全局样式

5.模板语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
更多模板语法:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

4.1数据绑定

普通写法&运算

跟vue差不多

boolean 类型

多选框文档
小程序的写法是在""里面加{{}}

4.2循环语法

数组

列表渲染链接

• wx:for="{{数组}}" 默认数据内容 item，默认索引index
• 使用 wx:for-item 可以指定数组当前元素的变量名，
• 使用 wx:for-index 可以指定数组当前下标的变量名：
• 类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块,block是一个空标签，可以用来写循环标签，或者判断标签都可以，他不会出现在页面上

• wx:key="字符串" wx:key="*this"

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *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

条件渲染:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

hidden

为真隐藏,为假显示.类似vue的v-show,在vue中v-if是直接在dom销毁,v-show是隐藏.这里两者的区别也等同

4.4小程序事件绑定

事件绑定:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
vue中的写法是v-on或@,小程序是用bind后加上事件类型,以前是在methed处理事件,小程序是直接写在page里面.
传参是data-自定义名='值'

4.5输入框绑定事件

指路input:https://developers.weixin.qq.com/miniprogram/dev/component/input.html

6.WXSS

指路:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
与 CSS 相比，WXSS 扩展的特性有：
尺寸单位:rpx（responsive pixel）: 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx,意思是无论屏幕多大就是750rpx,类似rem

rpx

对比绝对单位px,

7.图片组件

图片组件:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
使用mode:'类型'设置图样样式

8.总结