记一次小程序项目的开发心得

前言：这段时间一直负责公司的小程序的开发，总结了一些小程序的开发心得，方便本身之后的查阅也方便同仁少踩点坑。文章底部的技巧类小程序的识别小程序二维码功能，小程序的高斯模糊，都是本身填的坑。欢迎交流。

1、 框架类

1.Template引入与component构造器引入，应该选择哪个？

只是展现用，建议使用template，组件中涉及到较多的逻辑，建议使用component。 由于template没有本身的js文件，因此在列表中涉及到列表子项独立的操做，建议将列表子项写成component。

示例代码： page文件

<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList为page传入的数据-->
<template is="statement-goodlist" data="{{goodList}}"/>
复制代码

2.wxs文件的使用

Wxs更多的是做为一个过滤器使用，.wxs 文件能够被其余的 .wxs 文件 或 WXML 中的  标签引用。 .wxs模块中引用其余 wxs 文件模块，可使用 require 函数。

示例代码 page文件--相似过滤器效果

<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>
复制代码

3.生命周期

/** * 生命周期函数--监听页面隐藏 */
  onHide: function () {
    // 前进-跳转到其余页面的时候
  },
  
/** * 生命周期函数--监听页面卸载 */
onUnload: function () {
  // 后退-点击当前页面返回的时候
}
复制代码

利用这两个生命周期能够解决的问题： 防止用户快速切换页面（A->B）。致使动态设置导航栏中的文字显示出现错误 快速切换页面可能致使A页面中的异步数据还未返回，导致当切换到B页面的时候A数据才返回，使得导航栏显示的文字为A页面的导航栏标题。（即：A页面的导航栏标题为hello，B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面，可是导航栏标题显示的是hello，而不是world）

参考连接: 小程序中的生命周期onHide和onUnload

2、 通讯类

若是说数据是汽车的话，传递的通道或方式就是汽车要行驶的道路。因此，数据驱动型的框架，咱们少不了要学习如何建设这条"道路"，让"汽车"高速行驶。

1.页面与组件通讯

1-1.页面传递内容给组件

page为页面的属性名

components 为组件的外部属性名, 用properties对象接收

页面

<!-- Wxml --> 
<components-a components="{{page}}"></components-a> <!-- Js --> Page({ data: { page: '父亲pages' } }) 复制代码

组件

父亲pages

<!-- Wxml --> 
<!-- Js --> Component({ /** * 组件的属性列表 */ properties: { components: { // 属性名 type: String } }, /** * 组件的方法列表 */ methods: { onTap: function () { let page = this.data.components console.log(page) // 我是父亲pages } } }) 复制代码

1-2.组件传递内容给页面

给组件设置myevent事件，经过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。

页面

<!-- Wxml --> 
<components-a bind:myevent="onMyEvent"></components-a> <!-- Js --> Page({ // 监听myevent事件 onMyEvent: function (e) { console.log('接收a组件传递的内容:', e.detail) // '我是a组件' } }) 复制代码

组件

<!-- Wxml -->
<!-- 在自定义组件"components-a"中 --> <button bindtap="onTap">点击</button> <!-- Js --> Component({ properties: {} methods: { onTap: function(){ var myEventDetail = '我是a组件' this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件 } } }) 复制代码

2.组件与组件通讯

两个无任何关联的组件：经过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下)： 经过上面的方法，用组件 => 页面 => 组件的方式传递数据。

3.页面之间的通讯

3-1.使用全局变量 app.globalData

3-2.使用本地缓存 wx.setStorageSync

3-3.url传递

// A页面-传递数据
// 须要注意的是，wx.switchTab 中的 url 不能传参数。
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male'
})


// B页面-接收数据
// 经过onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) // raymond is male
    this.setData({
      option: option
    })
  }
})
复制代码

3-4.后一级页面对前一级页面的数据的管理(经过获取到页面对象进行数据操做)

这个方法的精髓，是经过获取到其余页面的对象原型，而后经过原型方法 setData 对当前对象管理的 data 进行修改，

示例以下：

// pageE.js
Page({
  data: {
    index: 1
  }
})
复制代码

当跳转到下一个页面 F 以后，假定在 F 中有操做须要对 E 中的数据有修改，则可使用如下方法：

// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})
复制代码

这个方法能够操做页面堆栈里面的页面的数据，能够作到让后一级页面对上级页面群的数据管理。

参考连接：爱范儿-页面之间的数据传递

4.页面与模板之间的通讯

页面

<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/> <!-- JS --> Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) 复制代码

传入模板的除了变量，还能够是事件方法对象。例如，模板中的点击事件，能够传递到使用模板的元素中。

三 、技巧类

1. 索引是变量，修改数组的值

根据文档，采用'array[0].text':'changed data'的格式。可是咱们实际应用中须要改变的索引值每每是动态的，因此，改装一下以下：

示例代码：

// 修改某个数组的动态的值 --- 提早将数组对象准备好
// 索引index是变量， value是变量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})
复制代码

2.其它方法封装(若是有更好的方法，欢迎交流)

• 小程序的识别小程序二维码功能

• 二次封装保存图片到相册(button-opeansetting的用法)

• 小程序的高斯模糊

• 解决小程序的遮罩层滚动穿透

that's all, 以上就是我目前全部的关于小程序项目的经验总结。以为对你开发有帮助的能够点赞收藏一波，若是我哪里写错了，但愿能指点出来。若是你有更好的想法或者建议，能够提出来与我交流。你们一块儿进步，共同成长。感谢[鞠躬]。

一块儿交流

• 我的的github仓库，有兴趣能够star一下[撒花]
• 你有好的想法能够一块儿交流，订阅微信公众号yhzg_gz(点击复制，在微信中添加公众号粘贴便可)，追求代码质量，高效率编程是咱们共同的目标。

ps: 提升本身，遇到志不一样道也和的人.