微笑小程序的相关知识

Posted 2021-01-28 划边逅

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

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

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

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

    其他注意事项：

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

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

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

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

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

1、项目搭建过程

    对于经验丰富的程序员来说，项目搭建（前端框架搭建）其实是最没有技术含量的工作，但项目配置可是最有含金量的工作。具体项目搭建流程请参考微信小程序官方教程 ，此处略过。若果是团队协作开发，需要将项目放在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四个文件组成，文件功能可参考微信小程序具体说明。

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

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 wx:for="{{contactorList}}" wx:key="unique">

    <View bindtap="reEditor" data-info="{{item}}" data-reeditIndex="{{index}}"></View>

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

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:for="{{imageArr}}" wx:key="item.id">

    <image class="slide-image" mode="scaleToFill" src="{{Item}}" data-index="{{index}}"></image>

</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结构的理解可以参考下面的实例图片：

<view wx:for="{{imageArr}}" wx:key="id">
    <image mode="scaleToFill" src="{{item.imgUrl}}"></image>
    <icon type="clear" size="16" bindtap="deleteImg"></icon>
</view>
<view bindtap="uploadImg"><image src="../plus.png"></image></view>

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

    第一步，点击加号图标向页面添加并显示图片，调用微信小程序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数组拼接的字符串
    }
  })

})

    样式效果实例如下图：

 

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>组件；第三步，对透明蒙层区域、取消按钮、确定按钮添加事件处理函数。

 

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

    HTML结构如下：

<view class="mask" bindtap="clickMask"></view>

<view class="datePicker">

  <view class="pickerBtn"><text bindtap="cancel">取消</text><text bindtap="confirm">确定</text></view>

  <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
版权声明：本文为博主原创文章，转载请附上博文链接！