微信小程序个人开发心得

接触了2个多月的小程序开发，踩了不少坑，写个小总结（本人第一次写博客，有解释不清楚的请多包涵）。
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这条函数。

微信小程序个人开发心得

猜你喜欢