微信小程序项目开发实践

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wanshaobo888/article/details/74452402

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

《我的博客地图》

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

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

  })

}

更新中...

展开阅读全文

没有更多推荐了,返回首页