第一次做小程序总结

上上周的今天在新公司入职，第二天给了小程序的活儿，之前没做过小程序以为很简单，打开微信公众平台小程序一看。。。这么多API，好吧随用随看吧。准备工作就不说了官网教程都有，就记录下这次遇到的问题和经验吧。

1.小程序的像素单位rpx很好用，换算方式就是1px = 2rpx; 

2.用户是否允许获取用户信息，小程序改版后只能使用控制，设置open-type="getUserInfo" 点击button会调取是否允许获取信息弹框，点击允许后会自动刷新到首页，demo如下

3.关于使用内嵌h5页面，src链接要授权，但是我们测试到时候要去掉授权，直接写h5页面路径，否则在小程序里页面没法打开，调试的话只能用alert, console无法看到在小程序。在这不得不说一下内嵌h5缓存实在太严重，在微信开发者工具可以点击清缓存——清除全部，在手机里就不能这样做了，目前我了解到的三种方式：

（1）h5链接生成二维码，用微信扫一扫，先把页面缓存过来，再通过小程序打开

（2）退出微信账号登录，再重新登录，这样很麻烦是不是？？那我们来看看第三种方式

（3）卸载微信重新安装，简单粗暴有没有

（4）上家公司的前端leader问我为什么不用版本管理器？好吧，这个需要我再研究下，类似于之前公司的版本管理，每次push页面都会生成一长串随机数

所以可能目前了解到的最好的方式是1，1实在不行就用2，绝对管用的，然后可能你要问你怎么知道是不是最新代码呢？好说呀，你加个alert(1)不就知道里吗是不是

4.wx.navigateTo() src 路径带的参数?xxx=xx&ccc=cc; 在跳转后的页面在onload生命周期里通过options可获得，options.xxx ，类似于react路由path传参

5.再说下h5页面。。。之前写h5比较少，第一次写就遇到0.5px这个大坑，写了个选项卡active有下划线，给了border:0.5px; 然后我发现这个下划线时好时不好的，难道是点击的时候有延迟吗，于是先下了个fastclick,然并卵，又下了个zepto。。依然然并卵，最后无计可施，你们猜我是怎么发现问题的

这时候就要先开一个小差了，苹果用户可能都知道吧？也许我是这么想的，虽然我之前也不太知道

（1）打开Safari偏好者设置，选中“高级菜单”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了

（2）打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，两个开关都打开

（3）准备工作完成。这时候把iPhone用数据线连到mac上，打开Safari浏览器，手机需要调试的页面用safari打开，这样在mac上就可以看到你打开的链接，打开，里边有调试器还可以打断点

说到这，你们有没有疑惑我的h5页面在电脑上，我是怎么用手机打开的呢，是的，作为h5小白这让我很头疼，最后在诸多百度答案里找到了我想要的

1）下载charles代理器

2）打开手机无线网络，点击右侧圆圈感叹号，滚到最下边配置代理，手动，服务器填写电脑ip,端口号8888

3）打开浏览器找一个二维码生成网页，随便伪造一个html链接生成二维码，打开charles，手机扫描二维码，这时候charles会抓包到你伪造的这个页面路径，重点来了，右键，最下边找到map local会有一个弹窗， local path 选择你本地页面文件，要将css,js都选择进去不要只单独的选择html,点击ok，这样就好了，本地文件就替代了线上文件，就可以在手机端测试了

当然我这个方法是万般无奈的，如果有host，可以直接配置到本地就方便多了，由于现公司这些还未成型，所以只能后期配置了，今天先写到这，希望这个记录对自己和别人都有些用，以后会坚持写博客把工作中和学习中的问题，经验都分享一下，如有错误之处请指出，或者我这些方法不是很好，有更好的方法麻烦给我留言哦，万分感谢！