阮一峰微信小程序入门学习笔记

刺骨的言语ヽ痛彻心扉 2022-12-29 06:47 401阅读 0赞

**小程序的目录结构：**

顶层的app.json文件用于整个项目的配置，对于所有页面都有效。  
除了前面提到的必需的pages属性，app.json文件还有一个window属性，用来设置小程序的窗口。window属性的值是一个对象，其中有三个属性很常用。

## 一：单位 ##

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。rpx是小程序为适应不同宽度的手机屏幕，而发明的一种长度单位。不管什么手机屏幕，宽度一律为750rpx  
pt:逻辑分辨率； pt的大小与屏幕的尺寸有关系，简单可以理解为长度和视觉单位，有人测试说各个机型上都满足 1 px = 0.75 pt  
px指物理分辨率,和屏幕尺寸没关系  
ppi 每英寸包含的像素点  
iphone6下1px=1rpx=0.5pt(rpx会在不同设备下转换、而px不会)

## 二：全局样式，全局数据 ##

全局样式写在顶层的 app.wxss中，全局数据写入顶层的app.js中，  
全局数据使用时，先在home.js中获取到App实例对象，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]  
getApp()函数是小程序原声提供的方法，用来从页面获取App实例对象，拿到实例对象后，便能从它上面拿到全局对象Appdata属性，从而拿到now属性，最后通过数据绑定，变成页面的变量now。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]

## 三：常见的事件： ##

tap：触摸后马上离开。
    longpress：触摸后，超过  **350ms**  再离开。如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发。
    touvhstart：触摸开始。
    touchmove：触摸后移动。
    touchcancel：触摸动作被打断，如来电提醒，弹窗等等。
    touched：触摸结束。

事件在传播上分两个阶段：**先捕获**（上层元素向下层元素传播），**后冒泡**（下层元素向上层元素传播）。同一个事件在同一个元素上会触发两次：捕获阶段一次，冒泡阶段一次。

小程序允许页面元素，通过属性指定各种事件的回调函数，并且还能够指定是哪个阶段触发回调函数。具体方法是为事件属性名加上不同的前缀。小程序提供四种前缀。

capture-bind：捕获阶段触发。
    capture-catch：捕获阶段触发，并中断事件，不再向下传播，即中断捕获阶段，并取消随后的冒泡阶段。
    bind：冒泡阶段触发。
    catch：冒泡阶段触发，并取消事件进一步向上冒泡。

例如：给button加了一个触摸事件（tap）的回调函数buttonHandler，bind：前缀表示这个回调函数会在冒泡阶段触发（bindtap）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]  
在页面脚本中定义该回调函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]  
Page（）方法的参数配置里定义了buttonHandler（），需注意的是：  
1.事件回调函数内部的this，指向的是页面实例  
2.事件回调函数的参数是事件对象event，可以从event上获取事件信息，比如事件类型、发生时间、发生节点、当前节点等等。  
3.页面实例中的this.setData（）方法，可以更改配置对象的打她属性，进而通过数据绑定机制，导致页面上的全局变量发生变化。

## 四：动态提示Toast ##

wx.showToast():wx是小程序提供的原生对象，API都定义在这个对象上面，wx.showToast()会展示微信内置的动态提示框，它的参数对象的title属性指定提示内容，duration属性指定提示框的展示时间，单位为毫秒。  
![在这里插入图片描述][20201229085147928.png]

## 五：对话框Modal ##

wx.showModal()方法，显示一个对话框  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 5]  
wx.showModal()方法的参数是一个配置对象。title属性表示对话框的标题（本例为"操作确认"），content属性表示对话框的内容（本例为"你确认要修改吗？"），success属性指定对话框成功显示后的回调函数，fail属性指定显示失败时的回调函数。  
success回调函数里面，需要判断一下用户到底点击的是哪一个按钮。如果参数对象的confirm属性为true，点击的就是"确定"按钮，cancel属性为true，点击的就是"取消"按钮。  
上面代码写的是that.setData()，而不是this.setData()。这是因为setData()方法定义在页面实例上面，但是由于success()回调函数不是直接定义在Page()的配置对象下面，this不会指向页面实例

## 六：API ##

WXML 的全称是微信页面标签语言  
**1.wx:for属性**  
![在这里插入图片描述][20201229101129337.png]  
标签的wx:for属性，表示当前标签（  ）启用数组循环，处理items数组。在循环体内，当前数组成员的位置序号（从0开始）绑定变量index，成员的值绑定变量item。  
![在这里插入图片描述][20201229101237981.png]  
**2.客户端数据储存**  
页面渲染用到的外部数据，小程序允许将一部分数据保存在客户端（即微信 App）的本地储存里面（其实就是自定义的缓存）。下次需要用到这些数据的时候，就直接从本地读取，这样就大大加快了渲染。  
输入框有一个input事件的监听函数inputHandler（输入内容改变时触发），按钮有一个tap事件的监听函数buttonHandler（点击按钮时触发）。这两个监听函数负责处理用户的输入。

wx.setStorageSync()方法是小程序的客户端数据储存API，用于把数据写入客户端储存，接受两个参数：键名和键值。  
wx.getStorageSync()方法。用来读取客户端储存的数据，只有一个参数，就是键名，这俩方法都是同步的，小程序也提供异步版本，参考[小程序官当文档][Link 1]  
代码例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 6]  
page（）的参数对象还有一个onLoad（）方法。此方法属于页面的生命周期方法，页面加载后悔自动执行该方法，他只执行一次，用于页面初始化，这里的意图是每次用户打开页面，都通过wx.getStorageSync()方法，从客户端取出以前的存储数据显示在页面上。  
**注意：**  
客户端储存是不可靠的，随时可能消失（比如用户清理缓存）。用户换了手机，或者手机重装微信，原来的数据就丢失了，所以，他只适合保存一些不重要的临时数据，常见用途是作为缓存，加快页面显示。  
**3.远程数据请求**  
新建一个数据文件db.json,写一个测试数组:  
![在这里插入图片描述][20201231100419460.png]  
然后进入db.json所在的目录，执行命令行：`npx json-server db.json`启动服务器。  
打开浏览器访问`localhost:3000/items`，会看到db.json文件内容。  
在home.js中写入下面代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 7]  
wx.request()方法是小程序网络请求的API，通过他可以发送HTTP请求。参数配置对象：url属性（请求的网址）和success（）方法（服务器返回数据的处理函数）。  
**4.组件**  
如果要在页面上展示当前用户的身份信息，可以使用小程序提供的组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 9]

<open-data>支持用户信息如下：
    userNickName：用户昵称
    userAvatarUrl：用户头像
    userGender：用户性别
    userCity：用户所在城市
    userProvince：用户所在省份
    userCountry：用户所在国家
    userLanguage：用户的语言

不需要用户授权，也不需要登陆，所以用起来方便，也因为这样，小程序不允许用户脚本读取返回的信息。  
**5.获取用户个人信息**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 10]  
上面代码中，标签的open-type属性，指定按钮用于获取用户信息，bind:getuserinfo属性表示点击按钮会触发getuserinfo事件，即跳出对话框，询问用户是否同意授权。用户点击"允许"，脚本就可以得到用户信息。  
**6.多页面的跳转**  
app.json配置文件的pages属性就用来指定小程序有多少个页面。  
新建pages/second目录。然后在app.json配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 11]  
pages数组包含两个页面。以后每新增一个页面，都必须把页面路径写在pages数组里面，否则就是无效页面。排在第一位的页面，就是小程序打开时，默认展示的页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 13]

上述代码用了两种跳转方式：  
1.就是链接标签，相当于网页标签  
2.页面跳转的脚本方法wx.navigateTo()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221120/45a1573a66034595874baf283d37e281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/acb1ff8657394700a86b958c9f725745.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/c8c767e645e44585a333d7dafc71bf71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/1af780e32e764f08b05f5f89548b7e2d.png
[20201229085147928.png]: /images/20221120/49f6480fa509428596ffa31d20c7ca9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201229091003972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201229085702294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[20201229101129337.png]: https://img-blog.csdnimg.cn/20201229101129337.png
[20201229101237981.png]: https://img-blog.csdnimg.cn/20201229101237981.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201231092859206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[20201231100419460.png]: https://img-blog.csdnimg.cn/20201231100419460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201231100254707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201231104712507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201231104740227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201231110351526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201231133728161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201231133907639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201231134036815.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70