接触了2个多月的小程序开发,踩了不少坑,写个小总结(本人第一次写博客,有解释不清楚的请多包涵)。
1、说一下onLoad,onReady,onShow,onHide,onUnload怎么巧妙运用:
onLoad和onReady只会在第一次一进入这个页面会运行,onShow官方给的意思是 当小程序启动或者从后台进入前台显示(用我的理解就是要么就是第一次进来这个页面,要么就是从子页面返回父页面时调用),onHide官方给的意思是 当小程序从前台进入后台(我的理解就是从父页进入子页的时候调用),onUnload官方意思叫 监听页面卸载(我的理解就是离开当前页时调用的)。
有小伙伴看完上面一大堆这就有疑问了,为啥我要理解这些,有什么用?别着急,需求和例子马上到!
需求:有时我们的需求是从子页传数据返回改变父页的数据时(如果只能是点击安卓或者ios的返回键)
解决方案:可以利用onUnload将数据传回父页,举个例子,我在index页面有个getValue变量,现在进入子页getPhone页面,当你想在getPhone页面获得的电话号码传给index页面的话,在onUnload函数里面调用以下代码就可以实现了:
需求:如图[img=http://img.bbs.csdn.net/upload/201710/21/1508577003_213006.png][/img]父页点击更多日期会进入到日期选择页,需要选中某个日期返回父页,判断子页传回来的值是今天还是明天或是其他
解决方案:在onShow函数进行判断选中日期是今天还是明天
2、页面跳转 wx.navigateTo只能局限5层,超过5层再使用wx.navigateTo将不生效,可以用wx.redirectTo,或者将不需要的页面先调用wx.redirectTo,就需要点击返回保留在的页面就用wx.navigateTo。
3、改变数组里面某个变量的值(dataList为request请求后赋值的数组):
4、给数组增加一个新变量
5、修改页面的标题
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#01827D",
"navigationBarTitleText": "漫长前端路",
"navigationBarTextStyle": "white"
}
6、根据需要改变页面的标题
7、input框placeholder的颜色修改 placeholder-style
1、说一下onLoad,onReady,onShow,onHide,onUnload怎么巧妙运用:
onLoad和onReady只会在第一次一进入这个页面会运行,onShow官方给的意思是 当小程序启动或者从后台进入前台显示(用我的理解就是要么就是第一次进来这个页面,要么就是从子页面返回父页面时调用),onHide官方给的意思是 当小程序从前台进入后台(我的理解就是从父页进入子页的时候调用),onUnload官方意思叫 监听页面卸载(我的理解就是离开当前页时调用的)。
有小伙伴看完上面一大堆这就有疑问了,为啥我要理解这些,有什么用?别着急,需求和例子马上到!
需求:有时我们的需求是从子页传数据返回改变父页的数据时(如果只能是点击安卓或者ios的返回键)
解决方案:可以利用onUnload将数据传回父页,举个例子,我在index页面有个getValue变量,现在进入子页getPhone页面,当你想在getPhone页面获得的电话号码传给index页面的话,在onUnload函数里面调用以下代码就可以实现了:
var pages = getCurrentPages();//得到当前已有的页面栈
var currentPage = pages[pages.length - 1];//当前页面的信息
var prevPage = pages[pages.length - 2];//上一页面的信息
prevPage.setData({ getValue:"我是由子页传过去的啊"})
需求:如图[img=http://img.bbs.csdn.net/upload/201710/21/1508577003_213006.png][/img]父页点击更多日期会进入到日期选择页,需要选中某个日期返回父页,判断子页传回来的值是今天还是明天或是其他
解决方案:在onShow函数进行判断选中日期是今天还是明天
2、页面跳转 wx.navigateTo只能局限5层,超过5层再使用wx.navigateTo将不生效,可以用wx.redirectTo,或者将不需要的页面先调用wx.redirectTo,就需要点击返回保留在的页面就用wx.navigateTo。
3、改变数组里面某个变量的值(dataList为request请求后赋值的数组):
this.data.dataList[i].eleInfo.serverPrice = 85;//这样之后不能马上生效,要进行再次setData
this.setData({ dataList: this.data.dataList });
4、给数组增加一个新变量
this.data.dataList[0].fold = true;
this.setData({ dataList: this.data.dataList });
5、修改页面的标题
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#01827D",
"navigationBarTitleText": "漫长前端路",
"navigationBarTextStyle": "white"
}
6、根据需要改变页面的标题
wx.setNavigationBarTitle({title: "小程序"})
7、input框placeholder的颜色修改 placeholder-style
8、input框获取焦点弹出键盘时将键盘右下角改为搜索,在input 里面加 confirm-type="search" 属性,并且绑定搜索的点击事件bindconfirm="searchProduct"
9、说一下wx.request的header问题,get请求时
'content-type':'application/json'
post请求时
'content-type':'application/x-www-form-urlencoded'
10、调用地图得到当前的详细位置,首先去高德或者腾讯地图api下得到微信小程序开发的sdk,拿到key,将sdk的js复制粘贴到utils下面(看个人喜欢放哪个位置,反正最终引用到就行);
例子:
var amapFile = require('../../../utils/amap-wx.js');
在onLoad中写下key
var shanAmapFun= new amapFile.AMapWX({ key: 'f387407e04361890eb00xxxxxxxxxxxxx'});
wx.getLocation({
type:'wgs84',
success:function (res){
var latitude= res.latitude
var longitude= res.longitude
that.setData({ lng: res.longitude, lat: res.latitude});
shanAmapFun.getRegeo({
location:'' + res.longitude+ ','+ res.latitude+ '',
success:function (data){
//成功回调
console.log(data[0].regeocodeData.formatted_address)
},
fail:function (info){
//失败回调
console.log(info)
}
})
}
})
11、根据当前经纬度得到距离某个经纬度的距离,如果距离不超10KM的话选腾讯地图,如果超的话建议调高德地图(别问为什么,因为腾讯现在版本距离只能算10km内的),代码就不上了吧,高德官网例子有,用的是getDrivingRoute这条函数
。
先到这吧,要准备下班啦!