微信小程序开发总结

2023年6月21日发(作者：)

微信⼩程序开发总结注册并创建项⽬框架⼩程序的框架分为视图层（View）和逻辑层（App Service），它提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统。这⾥的 WXML 和 WXSS 类似于前端的 HTML 和 CSS，但是 WXML 只能使⽤微信⾃⼰定义的组件⽽不能使⽤ HTML ⾥⾯的标签，WXSS 则和 CSS ⽆太⼤差别。框架的核⼼是⼀个响应的数据绑定系统，也就是说当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。代码结构图⽚.png上图是我做的投票⼩程序⾥⾯的代码结构：1、⼀个⼩程序主体部分由 、、 三个⽂件组成，必须放在项⽬的根⽬录，分别是整个程序的逻辑、全局配置及样式。(1) 是⼩程序的脚本代码。通过App()函数⽤来注册⼀个⼩程序，接受⼀个 Object 参数，指定⼩程序的⽣命周期函数等，如下图所⽰。图⽚.png类似于 Android 中 的 Application，我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量。其他地⽅使⽤时通过var app = getApp()即可获取其实例，并调⽤其中定义的⽅法和变量，但不要调⽤⽣命周期的⽅法。在App()的外⾯还可以另外定义 function 和变量，但只能在本⽂件内使⽤。(2) 是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝背景⾊，配置导航条样式，配置默认标题。图⽚.pngpages 指定了⼩程序的组成页⾯，第⼀个代表⼩程序的初始页⾯。window ⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景⾊。tabBar ⽤于配置客户端窗⼝的底部或顶部 tab 栏的样式以及 tab 切换时显⽰的对应页⾯。另外还可以配置各种⽹络请求的超时时间networkTimeout和是否开启调试模式debug。(3) 是整个⼩程序的公共样式表。可以配置⼀些通⽤的样式。图⽚.png2、pages ⾥⾯则是⼩程序的各个页⾯，其中 index ⼀般作为主界⾯（当然这并不是由名字决定的，⽽是在⾥⾯配置的第⼀个page），可以看到，⼀个界⾯由 wxml、wxss、js、json 等四个⽂件组成，分别是页⾯的逻辑、界⾯结构，样式以及配置。⼩程序规定这四个⽂件必须具有相同的路径和名字。(1) js 是页⾯的脚本代码。通过Page()函数⽤来注册⼀个页⾯。接受⼀个 Object 参数，其指定页⾯的初始数据、⽣命周期函数、事件处理函数等，如下图所⽰。图⽚.png其中data定义了页⾯的初始数据，会以 JSON 的形式由逻辑层传⾄渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。渲染层可以通过 WXML 对数据进⾏绑定。onLoad、onShow、onReady、onHide、onUnload 是页⾯的⽣命周期函数，分别在页⾯加载、显⽰、初次渲染完成、隐藏和卸载时调⽤。其中onLoad和onReady只会在页⾯加载时调⽤⼀次，onShow则每次显⽰页⾯都会调⽤⼀次。onPullDownRefresh⽤于监听⽤户下拉刷新事件，需要在 json 配置⽂件中开启enablePullDownRefresh。当处理完数据刷新后，llDownRefresh可以停⽌当前页⾯的下拉刷新。onShareAppMessage只有定义了该⽅法才会在微信的右上⾓菜单显⽰分享按钮，需要 return ⼀个 Object，⽤于⾃定义分享内容，包括title标题和path分享的页⾯的完整路径。viewTap是事件处理函数，函数名是⾃⼰取的，在渲染层可以在组件中加⼊事件绑定 click me ，当达到触发事件时，就会执⾏ Page 中定义的事件处理函数。当需要改变data中的数据时，不能直接修改，⽽需要调⽤a()⽅法进⾏修改。在Page()的外⾯同样可以另外定义 function 和变量，也只能在本⽂件内使⽤。(3) wxss 是样式表，具有 CSS ⼤部分特性，并进⾏了特性扩展，主要包括：① 尺⼨单位：rpx（responsive pixel）可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。② 样式导⼊：使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤;表⽰语句结束。例如：/** **/.small-p { padding:5px;}/** **/@import "";.middle-p { padding:15px;}定义在 中的样式为全局样式，作⽤于每⼀个页⾯。在 page 的 wxss ⽂件中定义的样式为局部样式，只作⽤在对应的页⾯，并会覆盖 中相同的选择器。(4) json 是页⾯的配置⽂件，页⾯的配置⽐全局配置简单得多，只是设置 中的 window 配置项的内容，页⾯中配置项会覆盖 的 window 中相同的配置项，⽆需写 window 这个键。上⾯说的开启下拉刷新功能就需要在这个⽂件⾥⾯进⾏配置：图⽚.png由于是 json 格式的⽂件，即使不需要配置任何东西也需要写{}，否则会报错。3、utils ⾥⾯包含了⼀些将公共的代码抽离出来的 js ⽂件，作为⼀个模块可以⽅便被任何地⽅使⽤。模块只有通过 s 才能对外暴露接⼝。下图即为utils/⽂件中的内容，包含了⼀个formatDate的⽅法，并将⽅法 exports 给外部使⽤。图⽚.png在其他地⽅使⽤时需要通过var utils = require('../../utils/');进⾏引⽤，之后就可以通过变量 utils 调⽤ ⽂件中定义的⽅法。4、images ⾥⾯则放了⼀些图⽚资源。数据绑定WXML 中的动态数据均来⾃对应 Page 的 data。数据绑定使⽤双⼤括号将变量包起来，可以作⽤于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)。例如：Page({ data: { message: "Hello", id: 0, condition: true }}) {{message}} 还可以在 {{}} 内进⾏简单的运算，如：Page({ data: { flag: true, a: 1,

b: 2, c: 3 length: 6, name: 'MINA', object: { key: 'Hello ' }, array: ['MINA'] }}) {{a + b}} + {{c}} + d // 结果为3 + 3 + d {{"hello" + name}}{{}} {{array[0]}}条件渲染在框架中，我们⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块： True 也可以⽤ wx:elif 和 wx:else 来添加⼀个 else 块： 1 2 3 因为 wx:if 是⼀个控制属性，需要将它添加到⼀个标签上。但是如果我们想⼀次性判断多个组件标签，我们可以使⽤⼀个 标签将多个组件包装起来，并在上边使⽤ wx:if 控制属性。 view1 view2 注意： 并不是⼀个组件，它仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。⼀般来说，wx:if 有更⾼的切换消耗⽽ hidden 有更⾼的初始渲染消耗。因此，如果需要频繁切换的情景下，⽤ hidden 更好，如果在运⾏时条件不⼤可能改变则 wx:if 较好。列表渲染在组件上使⽤wx:for控制属性绑定⼀个数组，即可使⽤数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item {{index}}: {{e}}Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] }})使⽤ wx:for-item 可以指定数组当前元素的变量名，使⽤ wx:for-index 可以指定数组当前下标的变量名： {{idx}}: {{e}}wx:for也可以嵌套，下边是⼀个九九乘法表 {{i}} * {{j}} = {{i * j}} 类似block wx:if，也可以将wx:for⽤在标签上，以渲染⼀个包含多节点的结构块。例如： {{index}}: {{item}} 如果列表中项⽬的位置会动态改变或者有新的项⽬添加到列表中，并且希望列表中的项⽬保持⾃⼰的特征和状态（如 中的输⼊内容， 的选中状态），需要使⽤ wx:key 来指定列表中项⽬的唯⼀的标识符。wx:key 的值以两种形式提供：① 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯⼀的字符串或数字，且不能动态改变。② 保留关键字 *this 代表在 for 循环中的 item 本⾝，这种表⽰需要 item 本⾝是⼀个唯⼀的字符串或者数字。Page({ data: { objectArray: [ {id: 0, unique: 'unique_0'}, {id: 1, unique: 'unique_1'}, {id: 2, unique: 'unique_2'}, ], numberArray: [1, 2, 3, 4] }}) {{}} {{item}} 事件上⾯简单提到过 的事件绑定，通常在组件中绑定⼀个事件处理函数，在相应的Page定义中写上相应的事件处理函数，参数是event。事件分为冒泡事件（当⼀个组件上的事件被触发后，该事件会向⽗节点传递）和⾮冒泡事件（当⼀个组件上的事件被触发后，该事件不会向⽗节点传递）。冒泡事件有：touchstart（⼿指触摸动作开始）、touchmove（⼿指触摸后移动）、touchcancel（⼿指触摸动作被打断，如来电提醒，弹窗）、touchend（⼿指触摸动作结束）、tap（⼿指触摸后马上离开）、longtap（⼿指触摸后，超过350ms再离开）。除此之外其他组件⾃定义事件如⽆特殊申明都是⾮冒泡事件，如的submit事件，的input事件，的scroll事件。事件绑定的写法同组件的属性，以 key、value 的形式。key 以 bind 或 catch 开头事件的类型结尾，如bindtap, catchtouchstart，value 是⼀个字符串，需要在对应的 Page 中定义同名的函数。bind 事件绑定不会阻⽌冒泡事件向上冒泡，catch 事件绑定可以阻⽌冒泡事件向上冒泡。当组件触发事件时，逻辑层绑定该事件的处理函数会收到⼀个事件对象。BaseEvent 基础事件对象的属性包括type（事件类型）、timeStamp（事件⽣成时的时间戳）、target（触发事件的组件的⼀些属性值集合）、currentTarget（当前组件的⼀些属性值集合）。CustomEvent ⾃定义事件对象继承⾃BaseEvent，并增加了 detail（额外的信息） 属性。TouchEvent 触摸事件对象继承⾃BaseEvent，并增加了 touches（触摸事件，当前停留在屏幕中的触摸点信息的数组）和changedTouches（触摸事件，当前变化的触摸点信息的数组） 属性。dataset 在组件中可以定义数据，以data-开头，多个单词由连字符-连接，不能有⼤写(⼤写会⾃动转成⼩写) 如data-element-type，最终在t 中会将连字符转成驼峰elementType。登陆⼩程序的登录流程如下图所⽰：以下是我的登陆⽅法，放在 中，并传⼊了⼀个 function 的参数 cb 作为登陆成功时的回调。如果不需要回调则不传即可。通常会在程序启动时调⽤⼀次（可以在 的 onLaunch 中，也可以在 的onLoad 中），之后在任何请求中碰到 access_token 过期或⽆效时再调⽤。function login(cb) { ({ success: function (res) { var code = ; if (code) { rInfo({ success: function (res) { var userInfo = fo; rageSync('user', userInfo); t({ url: 'server-host/login', data: { 'code': code, 'user_info': userInfo }, method: 'POST', success: function (res) { if ( && _token) { rageSync('accessToken', _token); typeof cb == 'function' && cb(); } else { showFailedToast('服务器登陆失败，请退出后重新登录'); } }, fail: function (e) { showFailedToast('服务器登陆失败，请退出后重新登录'); } }) }, fail: function (e) { showFailedToast('获取⽤户信息失败，请退出后重新登录'); } }) } else { showFailedToast('获取微信登录状态失败，请退出后重新登录'); } }, fail: function (e) { showFailedToast('微信登陆失败，请退出后重新登录'); } })}1、微信⼩程序需要调⽤ () 进⾏登录，成功后会返回⼀个 code。2、通过 rInfo() 获取⽤户信息，虽然这个 API 不需要⽤到 code，但也只能在 成功后才能调⽤。获取 userInfo 后，可以通过 rageSync() 将⽤户信息保存到本地缓存中。3、通过 t() 请求服务器的登录api，将 code 和 userInfo 传过去，服务器会⽣成⼀个access_token（即上图中的3rd_session，命名可以按照各⾃的习惯） 返回，之后通过 rageSync() 将这个 access_token 保存到本地缓存中。4、之后在任何地⽅进⾏请求服务器的操作，都可以通过 rageSync() 将本地保存的 access_token 取出来并作为参数带上。5、由于 access_token 存在过期的问题，因此可以与服务器约定⼀个特殊的 sta，⽐如 -500，作为 access_token 过期的标识，在任何请求中，碰到返回的 sta 为 -500 时，就可以重新调⽤ login ⽅法，传⼊⼀个登陆成功后的回调 function 作为参数，获取新的 access_token 保存，并在登陆成功后的回调 function 中再次发送请求。代码如下：function loadDetail(self) { t({ url: 'server-host/detail', data: { 'vid': , 'access_token': rageSync('accessToken') }, method: 'GET', success: function (res) { if ( == -500) { (function () { loadDetail(self); }) return; } ... }, fail: function () { ... })}API