微信小程序之遇到的问题和技术点

1.界面调整：
1)css中一般使用%来设计自适应背景长宽 一般设置组件时使用固定的RPX来自动调整大小  
2)一些机型特殊（如iphoneX）导致界面与预期效果不一致
解决思路：通过在app.js使用wx.getSystemInfo获得手机可用高度windowHeight存入globalData中，在页面中根据windowHeight来改变高度

使用方法：

例如：

 

2.腾讯位置服务 https://lbs.qq.com/console/key.html

三个步骤：申请秘钥  修改设置  下载SDK放入文件夹  最后调用+写逻辑

 

3.导航栏组件 个别页面需要返回上一页 大部分页面则不需要返回按钮
解决思路：设定一个isBack开关来控制是否有返回键，注意：此时组件的JS不能是Page而是Component

 

4.定位后开发工具端正常更新地址，但真机中可以获得定位数据但无法正常显示更新数据
解决方法：当使用<cover-view>中嵌套<button><image>时，开发工具可以正常解析<cover-view>内数据，但android手机端无法正常解析，将<cover-view>改为使用<view>即可

 

5.onLoad和onShow不执行代码段  当页面作为组件被加载的时候不运行onLoad onShow方法，
思考-如何调用其他页面的js中的方法
解决方法：使用module.exports 暴露模块接口，在可执行onLoadonShow的页面来调用暴露的模块接口

 

6.虽然使用module.exports方法解决onShow等方法的执行，但是却无法从Pages外调用到里面的方法，或者也无法将在Pages外得到的数据setData到页面的data数据中，无法与页面数据产生绑定更新

解决方法：弃用module.exports，在组件js的page中用methods: { 自定义方法名(){this.data.组件的方法()} }
在调用页wxml的组件栏<组件名 id='组件id'></组件名>
调用页js的onLoad中this.selectComponent('#组件id').自定义方法名() 

 

记错与小技巧：

1.在云端创建模拟商品数据，在调用collection获取成功后得到的是空数组
解决：云数据库权限设置改为所有用户可读，创建者可读写
2.点击左侧栏菜类为未加载的菜类时，加载后无法正常跳转道该菜类下，下拉页面无法显示加载的数据
解决：常见为scroll-view的高度设置问题 不能是% 或比页面高度高  设置固定的rpx即可 
3.数据库分页skip 
4.图片点击看大图方法  js：wx.previewImage     wxml：bindtap data-imgs