摘要：前言这段时间一直负责公司的小程序的开发，总结了一些小程序的开发心得，方便自己以后的查阅也方便同仁少踩点坑。文章底部的技巧类小程序的识别小程序二维码功能，小程序的高斯模糊，都是自己填的坑。
前言：这段时间一直负责公司的小程序的开发，总结了一些小程序的开发心得，方便自己以后的查阅也方便同仁少踩点坑。文章底部的技巧类小程序的识别小程序二维码功能，小程序的高斯模糊，都是自己填的坑。欢迎交流。一、 框架类 1.Template引入与component构造器引入，应该选择哪一个？
只是展示用，建议使用template，组件中涉及到较多的逻辑，建议使用component。
因为template没有自己的js文件，所以在列表中涉及到列表子项独立的操作，建议将列表子项写成component。
示例代码：
page文件
2.wxs文件的使用
Wxs更多的是作为一个过滤器使用，.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的
.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
示例代码
page文件--类似过滤器效果
3.生命周期{{phone.phone(AddressInfo.phone)}}
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// 前进-跳转到其他页面的时候
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
// 后退-点击当前页面返回的时候
}
利用这两个生命周期可以解决的问题：
防止用户快速切换页面（A->B）。导致动态设置导航栏中的文字显示出现错误
快速切换页面可能导致A页面中的异步数据还未返回，致使当切换到B页面的时候A数据才返回，使得导航栏显示的文字为A页面的导航栏标题。（即：A页面的导航栏标题为hello，B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面，但是导航栏标题显示的是hello，而不是world）
参考链接:
小程序中的生命周期onHide和onUnload
如果说数据是汽车的话，传递的通道或方式就是汽车要行驶的道路。所以，数据驱动型的框架，我们少不了要学习如何建设这条"道路"，让"汽车"高速行驶。
1.页面与组件通信1-1.页面传递内容给组件
page为页面的属性名
components 为组件的外部属性名, 用properties对象接收
页面
Page({ data: { page: "父亲pages" } })
组件
父亲pages
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事件监听传递过来的数据。
页面
Page({ // 监听myevent事件 onMyEvent: function (e) { console.log("接收a组件传递的内容:", e.detail) // "我是a组件" } })
组件
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
...
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.页面与模板之间的通信页面
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: 提高自己，遇到志不同道也和的人。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95878.html
摘要：执行构造函数执行析构函数第一次完毕第二次完毕执行输出执行构造函数第一次完毕执行构造函数执行析构函数第二次完毕执行析构函数终于逮到你了。。。这就导致了先执行构造函数，然后再执行析构函数。 class Test { protected $client; protected static $name; public function __construct() { ...
摘要：问题分析随着回滚版本的放量，主端崩溃逐渐回归正常，进一步坐实了新版本存在问题。内容非常多但都是重复的，看起来进程没有启动，导致连接端一直在进行重连。背景公司的主打产品是一款跨平台的 App，我的部门负责为它提供底层的 sdk 用于数据传输，我负责的是 Adnroid 端的 sdk 开发。sdk 并不直接加载在 App 主进程，而是隔离在一个多带带进程中，然后两个进程通过 tcp 连接进行通信...
阅读 1588·2023-04-26 01:54
阅读 1620·2021-09-30 09:55
阅读 2644·2021-09-22 16:05
阅读 1855·2021-07-25 21:37
阅读 2618·2019-08-29 18:45
阅读 1885·2019-08-29 16:44
阅读 1881·2019-08-29 12:34
阅读 1345·2019-08-23 14:02
