微信小程序

准备工作

1. 一个小程序账号
2. 微信开发者工具（可以工具自带版本管理，也可以使用自己的代码管理）
3. 平台接口需要有域名（有备案，注意安全证书）

需要注意的是：
一定一定一定要使用企业认证小程序，个人小程序无法满足各种开发需求（审核难，权限低，功能少）。

企业认证小程序：

1. 申请小程序，进行主体认证。（需要一系列的公司信息）
2. 如果有企业公众号，将小程序进行关联，即可复用公众号认证信息。
3. 如果没有企业公众号，需要用公司的对公账户向腾讯公司打款来验证主体身份。打款信息在提交主体信息后可以查看到。通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。
4. 如果微信小程序需要用到支付功能，必须通过微信认证。

几个需要注意的点

1. 模拟器效果不等于真机效果，开发时，一定要多使用真机调试功能！！！方便及早发现问题，定位问题。

   
   
   image.png

容易出现的问题有模拟器显示正常，真机显示不正常（如按钮字超出范围等等），虽然在模拟器上适配了iPhone5，但是真机的字体会稍大一些，要及时进行调整。推荐使用神机（iPhone se）进行适配。会暴露出很多显示问题。
有时会发现在模拟器正常使用的方法，在真机上既没有报错，也没有结果。这时推荐在社区论坛进行相关api搜索，看是否有相关解决方案。再其次就是看官方文档，看是否有别的方法能够实现一样的效果。

2. 提交审核时会对新的重要的api更新做出通知。要及时检查代码里面是否有使用，按照官方推荐的方法进行升级修改。

3. 一个微信小程序可以同时有两个版本，正式版本和体验版本（开发版本时效太短不考虑）。在项目中，正式版本为线上版本，为方便测试，体验版本可以设置为测试环境（需要给测试人员配置体验权限）。绑定域名时，需要把线上环境和测试环境域名都进行绑定。

技术点总结

微信小程序登陆逻辑

1. 前端通过wx.login()获取 code
2. 平台通过code获取用户唯一的openId
3. 平台通过openId在数据库查询对应的用户id（和token），返回给前端。（平台保存openId和用户Id的一一对应关系）
4. 后面的接口通过userID进行查询
5. token刷新机制可以跟据具体情况制定。（可以前端自动刷新）

微信扫二维码跳转到小程序的指定页面：（参考示例：发票助手页面，发票二维码，扫描可跳转到发票详情页面）

1. 需要在小程序开发进行相关配置。

2. 将配置完成的 url存在某二维码中，微信扫码就会直接跳转指定的小程序。

3. 如果想在 url中存入参数，则可以在 onLoad中 decodeURIComponent(options.q)，可以拿到完整 url，再通过处理参数的函数就可以解析出参数了。

4. 微信针对于特殊情况的测试提供了特殊编译入口，方便测试。

   
   
   image.png
   
   
   image.png

小程序分享某个非首页的功能页面（参考示例：和家慧审发票分享）

1. 需求：分享某个发票抬头页面，用户点击分享链接直达该发票页面。问题是直达页面后无法返回首页。

2. 解决方案，直达页面改为首页，当拿到 id时，则判断为需要跳转到发票详情页面，这样就解决了具体页面无返回首页按钮的问题。

小程序swiper轮播组件问题（参考示例：和家慧餐首页轮播）

1. swiper需要设置高度，无法随着子元素的高度变化。如果遇到轮播内容高度不一致，或者根据设备适配，导致高度不一致的情况，需要计算swiper的当前高度。如果是图片的话可以结合bindload进行图片高度的计算，然后动态的修改swiper的高度。

2. swiper的高度超出了屏幕高度，会出现无法滚动的问题。此时需要借助 来完成页面的纵向滚动，在swiper中间包一层，将swiper高度固定，这样就可以正常滚动了。

小程序wxss代码中使用calc进行计算

1.calc 是一个很好的工具，非常适合做不同设备的适配。使用时需要注意运算符中间需要有空格符，不然没有效果。

小程序使用map组件

1. latitude和longtitude未设置初始值，使用mapContext.moveToLocation()方法定位至当前地点。在模拟器显示正确，但是真机有白屏问题。

2. 解决方法，在这种情况下调用wx.getLocation()方法，获取当前经纬度对 latitude和longtitude进行赋值即可。

原生组件上的限制

• camera
• canvas
• input（仅在focus时表现为原生组件）
• live-player
• live-pusher
• map
• textarea
• video

由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：
原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
部分CSS样式无法应用于原生组件，例如：
无法对原生组件设置 CSS 动画
无法定义原生组件为 position: fixed
不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域

在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。

遇到的最大的问题是无法在原生组件上绘制动画，gif动画也不行。（年会游戏小程序）在使用时要多加注意。

模板消息

1. 模板下发条件：用户本人在微信体系内与页面有交互行为后触发
2. 模板推送位置：服务通知
3. 模板跳转能力：点击查看详情仅能跳转下发模板的该帐号的各个页面

image.png

实现步骤：

1. 通过微信公众平台配置模板。
2. 平台通过模板ID下发通知。