微信小程序项目开发实践

刺骨的言语ヽ痛彻心扉 2022-06-13 10:57 317阅读 0赞

*最近更新时间：2017年7月5日17:25:46*

[《我的博客地图》][Link 1]

现在的前端工程师职责越来越重要，很多新的技术都是从前端领域分离出来，微信小程序就是一个很好的前端技术的实践。开发微信小程序前，总觉得神秘面纱不可及，但经过前端团队一个月辛苦奋战，微信小程序从此不再陌生，而变得熟悉和可控。现在，小程序终于上线了，我也终于有时间来分享一下开发过程中遇到的问题。

0、开发过程中需要遵守的两条原则

①项目整体容量小于等于2M；②项目页面栈容量5级

官方声明：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

其他注意事项：

一、App() 必须在 app.js 中注册，且不能注册多个。

二、不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。

三、不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

四、通过 getApp() 获取实例之后，不要私自调用生命周期函数。

五、为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。

1、项目搭建过程

对于经验丰富的程序员来说，项目搭建（前端框架搭建）其实是最没有技术含量的工作，但项目配置可是最有含金量的工作。具体项目搭建流程请参考微信小程序[官方教程][Link 2] ，此处略过。若果是团队协作开发，需要将项目放在GitHub上的步骤是，先搭建项目，后放入GitHub本地仓库后上传。

因为，微信小程序在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。如果文件夹不为空，则不会生成demo。

2、项目目录结构和功能说明

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page，项目框架搭建成功后，可以看到微信小程序的目录结构非常简单：根目录结构是，一个pages文件夹，同级目录还有三个文件（app.js、app.json、app.wxss），pages文件夹存放所有页面。

对实际项目结构目录进行改造：

在根目录下创建images文件夹用来存放图片;

创建utils文件夹用来存放公共js文件，比如，表单验证函数库（还可以包含时间格式化模块formatTime，域名配置模块domainConfig，省市区三级内容模块city）：

在utils文件夹下面新建validater.js文件，var validater = \{...some function\}创建对象封装一系列函数,最后导出module.exports.validater = validater;

在根目录脚本文件app.js中载入，letvalidater = require('utils/validater.js'); || import \{ validater \} from 'utils/validater'；两种方式均可，并在项目的整个生命周期函数上注册App(\{validater: validater\});。（node的module遵循CommonJS规范，requirejs遵循AMD，seajs遵循CMD）

在实际页面进行调用，getApp().validater.isEmail(value)，对具体value值进行处理

当然，项目的整体配置可根据项目要求进行灵活搭配，目录结构和功能可依据需求进行定制。

3、每一个单页面都是由一个文件夹和四个文件组成

文件夹名称是该单页面的名称，首字母大小写均可，内容由JS、JSON，WXML和WXSS四个文件组成，文件功能可参考微信小程序具体[说明][Link 3]。

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。

4、页面栈原理

在小程序官方文档 API章节中的导航目录中，封装了5种导航方式，分别为wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.reLaunch。由于微信的页面路径深度最多是五层，因此在用选择当行方式很重要。因为，微信小程序的左上角有返回按钮，返回按钮的意思是回退到上一个页面，但当导航跳转方式选择错误，第一，会导致返回的不是上一个页面；第二，导航跳转无法载入，由于5级页面栈容量已经饱和。

wx.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，该方法会往页面栈中增加一条记录；

wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面，该方法会不会增加页面栈记录，保持页面栈原始内容；

wx.reLaunch(OBJECT)基础库 1.1.0 开始支持，低版本需做兼容处理，关闭所有页面，打开到应用内的某个页面，该方法会清空页面栈全部记录；

wx.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，该方法和和页面栈无关；  
    wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面，该方法会删除页面栈中一条记录；

查看页面栈容量的方法，以及各页面中存储的数据：可通过 getCurrentPages() 获取当前的页面栈信息，

let arr = getCurrentPages();//页面栈数据数组，存储页面栈中页面js文件中data对象

arr\[arr.length - 1\]可以获取到当前页面的相关信息；

比如，获取（重置）上一个页面的中的某个参数，let previousThis = arr\[arr.length - 2\]，previousThis.data.contactorList可以拿到数据，previousThis.data.setData(\{ contactorList:\[\]\})可以重置数据。

页面栈数组对象getCurrentPages()中包含的信息量非常大，有效利用这个对象对于开发效率事半功倍。

5、页面传参和参数回显

由于小程序开发没有组建的概念，因此可以理解为SPA单页面应用开发，对于一款产品，只要页面的基本功能相同，就可以复用。因此，一款再复杂的产品，不同的单页面也不超过十几个。在小程序开发过程中，复用页面是最常用的方案。比如，A页面可以实现某个功能，这时C页面、D页面和F页面都需要用A页面的功能，就可以把A页面当做一个模板来使用，A页面接收父级页面传递来的参数，进行处理后，可以传递给父级页面需要的数据。

页面之间的通信：

A页面跳转到B页面，通过URL拼接传递参数常用的两种方案：

方案一：A页面通过添加点击事件跳转传参，wx.navigateTo(\{ url:'./B/index?parameter01=one&parameter02=two'\})，B页面接收A页面的参数，onLaunch:function(options)\{console.log(options.parameter01)\}。A页面通过URL地址问号？后拼接的参数，可以在B页面的 onLaunch函数 和 onShow函数 的形参中options对象中获取。

注意事项：通过URL拼接的方式传递参数的类型是对象或者数组，在传递的时候应当使用JSON.stringify(obj || array)进行json数据编码，然后在拿到数据时应当使用JSON.parse(obj || array)进行数据解码。

方案二：A页面通过导航组件navigator传递参数，<view><navigator url="./B/index?title=navigate">跳转到新页面</navigator></view>，B页面接收参数童方案一。

getCurrenPage获得A中的参数，可做回

不通过URL拼接传递参数的方案：通过原生数组对象 getCurrentPages() 获取页面栈信息，从而拿到需要的参数。方案具体步骤如下：

实例：A页面 data对象 中的一个 address参数 是用来存储用户的住址信息并显示在A页面的具体位置，当用户点击A页面的地址输入框时会跳转到存储地址列表的B页面，用户可点击直接选择获取，选择成功会跳转到A页面，并显示用户的选项。这个交互功能涉及到两个知识点：

第一，B页面给A页面参数赋值的方案

var arr=getCurrentPages()，获取页面栈数组；

var previousThis=arr\[arr.length - 2\]，获取A页面的this指针；

previousThis.data.address='new address'，给A页面的数据赋值；

第二，在A页面中操作B页面的显示内容

previousThis.setData(\{address:previousThis.data.address\})，可在B页面返回A页面之前，让A页面正确显示出用户的操作内容。（可以将上述的previousThis.data.address='new address'和previousThis.setData(\{address:previousThis.data.address\})步骤合二为一成previousThis.setData(\{address:'new address'\})）

在实际项目的开发过程中，一个页面显示的所有内容，往往是从接口直接拿到返回的数据显示出来，在B页面进行操作的时候，也是和后台接口通信，对数据库内容进行增加和删除，因此在做回显处理时，不同过页面栈信息的方式操作回显内容，而是通过重新请求接口的方式来刷新并显示最新数据。

因此，通过wx.navigateBack(OBJECT)从B页面返回A页面后，保证A页面显示的是最新数据，需要在A页面中做特殊处理，A页面中所有从后台接口拿到的作为显示的数据，进行wx.request(\{url: 'test.php',data: \{\},header: \{\},success: function(res) \{\}\})数据请求的方法必须放在onShow: function(options) \{// Do something when show.\}中，这样才能保证wx.navigateBack(OBJECT)执行后从B页面返回A页面后，A页面会重新请求数据，并显示出来。

6、css样式

项目根目录下的app.wxss文件是小程序公共样式表，样式重置、样式初始化和公共样式可以放在这个文件中，这里面的样式属于全局样式，作用于任何一个页面（即，在其他页面中不需要导入）。

同时，每个单页面都有自己依赖的样式文件，对于可复用的单页面的样式文件，如B页面可以复用A页面的样式文件，可以在B页面的wxss样式文件头部导入A页面的样式文件，方式如下：@import '../A/A.wxss';

7、底部标签导航的设置

补充页面栈知识：微信小程序框架以栈的形式维护了当前所有页面，当发生路由切换的时候，页面栈的表现如下：初始化-新页面入栈；打开新页面新页面入栈；页面重定向-当前页面出栈-新页面入栈；页面返回-页面不断出栈-直到目标返回页-新页面入栈；Tab 切换-页面全部出栈-只留下新的 Tab 页面;重加载\-页面全部出栈-只留下新的页面。

底部Tab导航的配置在app.json中tabBar对象进行设置，实例如下：

"tabBar": \{  
    "selectedColor": "\#00B4FF",//tab 上的文字选中时的颜色  
    "list": \[//tab 的列表，详见 list 属性说明，最少2个、最多5个 tab  
      \{  
        "pagePath": "pages/index/index",//页面路径，必须在 pages 中先定义  
        "text": "首页",  
        "color": "",//tab 上的文字默认颜色  
        "iconPath": "image/1.png",  
        "selectedIconPath": "image/1\_hover.png"  
      \},  
      \{  
        "pagePath": "pages/message/index",  
        "text": "消息",  
        "iconPath": "image/2.png",  
        "selectedIconPath": "image/2\_hover.png"  
      \},  
      \{  
        "pagePath": "pages/my/index",  
        "text": "我的",  
        "iconPath": "image/3.png",  
        "selectedIconPath": "image/3\_hover.png"  
      \}  
    \]  
  \},

8、HTML5标签的自定义属性data-\*

在html标签中加入自定义属性data-\*用于存储页面的自定义数据，然后在元素绑定的方法中可以获取数据

注意事项：属性名不能包含大写字母，在 data- 后必须至少有一个字符；该属性可以是任何字符串；自定义属性前缀 "data-" 会被客户端忽略。

具体应用：

场景一：

</View>

reEditor(e)\{

let info = e.currentTarget.dataset.info;//js中获取绑定的数据

let index = e.currentTarget.dataset.index;//js中获取绑定的数据

微信小程序的 列表渲染 很常用，对一个数组的数据重复渲染出该组件集合，需求：对数组的每一个数据需要绑定事件同时获取 数据 和 索引值，此时，可以用自定义属性data-\*在html元素上绑定数据，在函数中的e对象中获取绑定的数据。

注意：绑定的函数bindtap必须和data-\*绑定的数据在同一个html元素上绑定，不然无法获取数据

场景二：

通过获取 html元素对象 属性的方法getAttribute()获取绑定的数据，也可以通过 获取元素节点后 用 HTML5自定义属性对象Dataset 获得需要的数据document.getElementById('owl').dataset.animal-type

function showDetails(animal)  
\{  
var animalType = animal.getAttribute("data-animal-type");  
alert("The " + animal.innerHTML + " is a " + animalType + ".");  
\}  
<ul>  
  <li οnclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>  
  <li οnclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>

</ul>

9、数据动态显示

微信的数据都存储在js文件中的data对象中，改变数据有两种方式：this.data.key = value;这种方法不会触发二次渲染；this.setData(\{key:value\});这种方法可以触发二次渲染；因此，对于任何需要显示的数据或元素，发生变化时需要用第二种方法。

10、注意事项

原型psd图的尺寸在书写wxss样式文件时，按照1px写成2rpx的方式

<Text>标签嵌套<View>标签后，<View>标签中的任何内容都不会显示出来

11、项目整体 数据接口 和封装 公共函数 对象配置

项目整体配置可以在app.js的App(\{\})方法中配置，App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App(\{  
    HOST: ,//主机域名

loginCode: ,//用户身份验证码

validater: ,//正则校验对象

formatTime:,//日期时间对象

onLaunch: function (e) \{ \},

onShow: function (e) \{ \},

onHide: function (e) \{ \},

onError: function (e) \{ \},

\});

配置好以上文件后，在进行数据请求时的形式：

wx.request(\{url: getApp().HOST + '/interface/name',header: \{\},data: \{ key:value \},method: 'GET',  
    success: function(res) \{\},  
    fail: function(res) \{\}  
\})

在进行方法调用时的形式：getApp().formatTime.time(str)；将 时间戳 转换为 08:30 的格式函数

12、表单组件input应用

基础应用，一个input组件绑定一个函数：

<input  bindinput="input" value="\{ \{inputValue\}\}" placeholder="" />  
input: function(e) \{  
    this.setData(\{  
      inputValue: e.detail.value  
    \})  
\},

多输入应用，一个input组件绑定一个函数看起来很繁琐，可以采用多个input组件绑定一个函数的方案：

<input bindinput="inputFn" value="\{ \{info.name\}\}" data-key="name"/>  
<input bindinput="inputFn" value="\{ \{info.age\}\}" data-key="age"/>  
<input bindinput="inputFn" value="\{ \{info.address\}\}" data-key="address"/>  
<input bindinput="inputFn" value="\{ \{info.mobile\}\}" data-key="mobile"/>  
inputFn(e)\{  
    var key = e.target.dataset.key;  
    var value = e.detail.value  
    this.data.info\[key\] = value;  
    this.setData(\{  
        info: this.data.info  
    \})  
\}

13、图片的上传和下载显示

前后端开发下载显示图片的方案：

图片的html容器：

</view>

图片数据的请求处理：

wx.request(\{  
    url: url,  
    success(res)\{  
        let data = res.data.imageArr;//返回的图片url没有域名，只有相对路径，需要做域名拼接处理\["/1.jpg","/2.jpg","/3.jpg"\]  
        for(let i = 0; i < data.length; i++) \{data\[i\] = 'http://img.wanshaobo.com' + data\[i\];\}  
        this.setData(\{imageArr: data\});//图片显示操作  
    \}  
\})

图片的本地显示和网络上传方案：

图片的html容器，HTML结构的理解可以参考下面的实例图片：

图片的添加显示和网络上传：

第一步，点击加号图标向页面添加并显示图片，调用微信小程序API-媒体-图片-wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照

wx.chooseImage(\{  
  count: 9 - imageArr.length,  
  success: function (res) \{  
//res.tempFilePaths图片的本地文件路径列表:\["wxfile://tmp\_1.png","wxfile://tmp\_2.png","wxfile://tmp\_3.png"\]  
//res.tempFiles图片的本地文件列表，每一项是一个 File 对象:\[\{path:"wxfile://tmp\_1.png",size:1021\},\{path:"wxfile://tmp\_2.png",size:21\},\{path:"wxfile://tmp\_3.png",size:103\}\]  
  this.data.imageArr.push(res.tempFilePaths)  
  that.setData(\{ imageArr:this.data.imageArr\});

\})

第二步，调用微信小程序API-网络-上传、下载-wx.uploadFile(OBJECT)  
将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data 。

上传图片到自己图片服务器后的成功回调函数会返回一个对象，该对象是存储图片的服务器返回的数据，包含了该图片的URL地址，这个URL地址就是以后拿到该图片的唯一URL路径。

imageArr.forEach((item,index)=>\{  
  wx.uploadFile(\{  
    url: 'https://wsb-file.wanshaobo.com/file/simpleUpload',  
    filePath: item,  
    name: 'file',  
    header: \{ 'content-type': 'multipart/form-data' \},  
    success: function (res) \{  
    //res.data:"\{"msg":"上传成功","code":200,"filePath":"/group1/M00/0A/F1/wKgGS1lfUYeAfnPLAAATCakKLos829.png"\}"  
    //res.errMsg:"uploadFile:ok"

this.data.imgsArr.push(JSON.parse(res.data).filePath)//图片成功上传返回的URL路径数组，不包含主机名

this.data.imgsStr = this.data.imgsArr.join(',')//存储在数据库中属于该用户的图片URL数组拼接的字符串  
    \}  
  \})

\})

样式效果实例如下图：

![20170707164600200][]

14、获取用户地理位置名称的方案

比如：北京市东城区和平西桥58号

需要用的的API接口：

API-开放接口-设置-wx.getSetting(OBJECT)//获取用户当前设置，成功回调res.authSetting =\{

scope.userInfo": true,//用户信息

"scope.userLocation": true//地理位置

"scope.address": true//通讯地址

"scope.record": true//录音功能

"scope.writePhotosAlbum": true//保存到相册

API-开放接口-授权-wx.authorize(OBJECT)

API-位置-获取位置-wx.chooseLocation(OBJECT)

具体代码分析：第一步，通过 wx.getSetting 查询用户是否授权了 "scope.userLocation" 这个 scope；第二步，通过 wx.authorize 接口打开‘地理位置’授权界面对userLocation进行授权；第三步，通过 wx.chooseLocation 接口打开地图选择位置

wx.getSetting(\{

success(res) \{

if (!res\['scope.userLocation'\]) \{

wx.authorize(\{  
        scope: 'scope.userLocation',  
        success() \{

wx.chooseLocation(\{ success: function (res) \{ res.address;res.longitude;res.longitude;\});

\}  
      \})  
    \}

\})

15、自定义页面的滚动选择器

需求，如下图所示，实现逻辑，第一步，对页面元素进行堆叠排列，页面正文内容z-index:0;半透明蒙层z-index=1，宽高占据满屏;滚动选择器z-index=2：第二步，对选择器样式进行设计，需要用到<picker-view><picker-view-column></picker-view-column></picker-view>组件；第三步，对透明蒙层区域、取消按钮、确定按钮添加事件处理函数。

![Image 1][]![20170708113647299][]

微信小程序的原生滚动选择器仅有三种类型，普通选择器，时间选择器，日期选择器，但现在的选择器需求是：年月日时分秒。

HTML结构如下：

<picker-view  value="\{ \{dateValue\}\}" bindchange="dateChange">

<picker-view-column><view wx:for="\{ \{years\}\}">\{ \{item\}\}年</view></picker-view-column>

<picker-view-column><view wx:for="\{ \{months\}\}">\{ \{item\}\}月</view></picker-view-column>

<picker-view-column><view wx:for="\{ \{days\}\}">\{ \{item\}\}日</view></picker-view-column>

<picker-view-column><view wx:for="\{ \{hours\}\}" >\{ \{item\}\}时</view></picker-view-column>

<picker-view-column><view wx:for="\{ \{minutes\}\}">\{ \{item\}\}分</view></picker-view-column>

<picker-view-column><view wx:for="\{ \{seconds\}\}">\{ \{item\}\}秒</view></picker-view-column>

</picker-view>

</view>

数据绑定方案：

数据初始化，定义初始化显示的数据是当前的日期时间：

this.setData(\{dateValue: \['0',date.getMonth(),date.getDate()-1,date.getHours(),date.getMinutes()\]\})

年份列表显示当前年份到后三十年，对于具体月份显示的天数列表需要做特殊处理，1-3-5-7-8-10-12每月31天，4-6-9-11每月30天，2月的天数最为特殊，闰年2月份为29天，平年2月份为28天，每月天数处理如下：

var date = new Date();

var year = date.getFullYear();//获取当前年份

var month = date.getMonth() + 1;//获取当前月份

var days ;//定义当月的天数；

if(month == 2)\{

days= ((year % 4 == 0 && year % 100 != 0) || year % 400 ==0) ? 29 : 28;//闰年29天，还是平年

\}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)\{

days= 31;//月份为：1,3,5,7,8,10,12 时，大月.天数为31

\}else\{

days= 30;//其他月份，小月，天数为30.

\}  
for (let i = 1 ; i <= days; i++) \{

daysArr.push(i)

月份列表滚动选择器发生变化时，天数选择器的天数数组也需要做响应式实时变化,当滚动选择，value 改变时触发 change 事件，event.detail = \{value: value\}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）:

dateChange(e)\{ //月份发生变化时需要改变响应的天数

var date = new Date(),days = \[\]

var year = date.getFullYear() + e.detail.value\[0\];//获取年份

var month = e.detail.value\[1\] + 1;//获取月份

var days ;//定义当月的天数；

if(month == 2)\{

days= ((year % 4 == 0 && year % 100 != 0) || year % 400 ==0) ? 29 : 28;//闰年29天，还是平年

\}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)\{

days= 31;//月份为：1,3,5,7,8,10,12 时，大月.天数为31

\}else\{

days= 30;//其他月份，小月，天数为30.

this.setData(\{days: days\})

var dateArr = e.detail.value

this.setData(\{

year: this.data.years\[dateArr\[0\]\],

month: this.data.months\[dateArr\[1\]\],

day: this.data.days\[dateArr\[2\]\],

hour: this.data.hours\[dateArr\[3\]\],

minute: this.data.minutes\[dateArr\[4\]\]

\})

更新中...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 2]: https://mp.weixin.qq.com/debug/wxadoc/dev/
[Link 3]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
[20170707164600200]: /images/20220613/f9f9c2a6d69d40719b97334389992d7f.png
[Image 1]: 
[20170708113647299]: /images/20220613/6fb2e4627732476a8f367fdcb96b09d6.png