微笑小程序的相关知识

时间 2019-12-12

标签微笑程序相关知识繁體版

原文原文链接

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

0、开发过程当中须要遵照的两条原则css

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

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

其余注意事项：node

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

2、不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就能够拿到 app 实例。程序员

3、不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 尚未生成。数据库

4、经过 getApp() 获取实例以后，不要私自调用生命周期函数。json

5、为了方便开发者减小配置项，咱们规定描述页面的这四个文件必须具备相同的路径与文件名。小程序

一、项目搭建过程

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

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

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

小程序包含一个描述总体程序的 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值进行处理

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

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

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

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

四、页面栈原理

在小程序官方文档 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()中包含的信息量很是大，有效利用这个对象对于开发效率事半功倍。

五、页面传参和参数回显

因为小程序开发没有组建的概念，所以能够理解为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页面会从新请求数据，并显示出来。

六、css样式

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

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

七、底部标签导航的设置

补充页面栈知识：微信小程序框架以栈的形式维护了当前全部页面，当发生路由切换的时候，页面栈的表现以下：初始化-新页面入栈；打开新页面新页面入栈；页面重定向-当前页面出栈-新页面入栈；页面返回-页面不断出栈-直到目标返回页-新页面入栈；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"
}
]
},

八、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 onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>

</ul>

九、数据动态显示

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

十、注意事项

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

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

十一、项目总体数据接口和封装公共函数对象配置

项目总体配置能够在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 的格式函数

十二、表单组件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
})
}

1三、图片的上传和下载显示

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

图片的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数组拼接的字符串
}
})

})

样式效果实例以下图：

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

好比：北京市东城区和平西桥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;});

}
})
}

}

})

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

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

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

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]]

})

}
---------------------
做者：FEBruce
来源：CSDN
原文：https://blog.csdn.net/wanshaobo888/article/details/74452402