微信小程序开发经验记录

发表于 2022-03-03 更新于 2022-08-20 分类于前端

微信小程序，一种全新的连接用户与服务的方式，可以在微信内被便捷的获取和传输，同时拥有出色的使用体验。

微信小程序开发经验

一、小程序简介

一种全新的连接用户与服务的方式，可以在微信内被便捷的获取和传输，同时拥有出色的使用体验。

1.1 小程序技术发展史

当webview成为移动web的重要入口时，微信开发了基于微信原生组件的 JS API:

目的：让开发者可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。
2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，包括拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。

目的：解决移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力；

问题：没有解决使用移动网页遇到的体验不良的问题（用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显）。

//使用 JS-SDK 调用图片预览组件
wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

设计微信小程序，使得所有开发者在微信中都能获得比较好的体验：
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发

1.2 小程序与普通网页开发区别

开发语言：
- 小程序：JavaScript+WXML+WXSS;
- 网页：JavaScript+html+css;
运行线程：
- 小程序：开发渲染线程和脚本线程是分开，分别运行在不同的线程中。
- 网页：开发渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应。
API使用：
- 小程序：缺少浏览器对象相关的DOM API和BOM API（小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象），NPM 的包在小程序中也无法运行（JSCore 的环境同 NodeJS 环境也是不尽相同）。
- 网页：没有限制。
开发环境：
- 小程序：申请小程序帐号、安装小程序开发者工具、配置项目等等。
- 网页：只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。

1.3 小程序底层原理

若要了解小程序底层原理，请参考小程序开发指南第三章与第六章：

第三章理解小程序宿主环境
第六章底层框架

1.4 小程序特点

内存占用小；
无需安装；
开发简单高效；
面向公众；
易用且安全的微信数据开放；

二、开发准备

2.1 申请账号

开发小程序的第一步，需要拥有一个小程序 AppID，后续的所有开发流程会基于这个 AppID 来完成，进入小程序注册页根据指引填写信息和提交相应的资料。

一个主体对应一个AppID，一个AppID对应一个小程序，即要开发多个小程序，需要注册多个小程序账号。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录小程序后台，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

2.2 安装开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》。

打开小程序开发者工具，用微信扫码登录开发者工具。

三、小程序开发

3.1 小程序页面开发

与网页开发略微不同，小程序开发使用下面四种类型的文件：

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

具体开发工作参考小程序开发指南

3.2 Webview页面开发

小程序页面有自身的限制，例如一些js库无法使用；而webview是小程序开放能力的一种，通过合规的方式跳转到其他网页，可以扩展小程序的功能。在产业地图小程序的开发过程中，需要使用ArcGIS 的地图服务，但是小程序暂时没有提供ArcGIS js api ；所以需要开发外部webview网页实现访问地图服务的功能；

3.2.1 tips

网页内 iframe 的域名需要配置到业务域名白名单（业务域名限制见5.3业务域名限制）。
个人类型的小程序暂不支持使用webview。
开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。
避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。

3.3 后台服务开发

小程序的后台服务开发有两种方式：传统后台开发，云开发；

3.3.1 传统后台开发

后台服务功能实现与其他项目一样，不多赘述。

出于安全性的考虑，小程序只可以跟指定的域名进行网络通信，包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

3.3.1.1 域名配置流程

服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：

域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。
域名必须经过 ICP 备案；
出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
不支持配置父域名，使用子域名

3.3.1.2 传统方式特点

不便：需要自己搭建服务器，申请域名、域名备案，开放端口，配置https证书，管理数据存储；若有大访问量的需求，还需要做负载均衡，CDN加速等。
优势：灵活。

3.3.2 微信云开发

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。

3.3.2.1 云开发特点

优势：无需搭建服务器，免登录、鉴权调用微信服务，无需域名备案，不用担心DDoS等安全问题，不用管理数据存储……
劣势：灵活性不高，无法定制服务功能，譬如转发（ArcGIS地图服务会使用到），需要收费。

3.3.2.2 收费标准

按量计费
预付费

四、小程序部署

小程序部署分为三个不同版本：测试版、体验版和线上版。不同版本的访问权限不同。

测试版：项目成员访问；
体验版：项目成员+体验成员；
线上版：都可访问（可暂停服务，暂停后无法访问）

在模拟器中完成开发后，就可以上传代码到服务器，先发布一个测试版，使用真机做进一步调试。测试版没有问题后，则可以进入微信后台→版本管理发布体验版。上线则需要提交审核，通过后就可以通过微信搜索到小程序了。

五、其他事项

出于安全性的考虑，小程序只可以跟指定的域名进行网络通信，且只支持HTTPS协议和WSS协议。因此，要完成小程序的线上运行，就需要申请域名并进行域名备案（在服务器没有可用域名的情况下）；另外，若小程序中使用到了webview，则需要配置业务域名，而业务域名是不能带端口的，这就意味着必须开放默认的443端口才能访问到webview。

若是购买阿里云、腾讯云或者华为云等此类云服务器，做域名申请、备案和开放端口并没有什么坑；以下针对使用企业/单位外网服务器(电信运营商)的情况。

5.1 域名申请

选择一个靠谱的域名注册商例如阿里云、腾讯云或者华为云。并没有坑。

5.2 域名备案

域名备案有两种途径：

代理网站备案（阿里、腾讯、华为……）；
自己通过服务器对应的通信公司备案（电信、移动、联通）；

5.2.1 代理网站备案

必须购买相应网站上的云服务器（将云服务ip解析到二级域名），否则域名会被检测为空壳网站而被注销，无法反驳的注销理由。

5.2.2 自己备案

自己通过服务器对应的通信公司备案相对来说会十分麻烦，下面以个人域名电信自助备案为例（比企业备案难度更大），准备以下材料：

主办单位有效证件（个人手持身份证照片）。
信息安全入网责任书（单位盖章改按手印）。
居住证明（上传身份证）；
真实性核验；
域名证书；
网站负责人照片；

真实性核验和网站负责人照片需要到营业厅现场盖章和拍照（要求特定的背景墙）；

登录中国电信网站自助备案管理系统填写备案信息，并上传材料，查看备案进度，一般需要一周的时间，备案过程中，遇到问题及时和工作人员联系：

电信备案咨询电话：87129916 9:00-12:00 2:00-5:00
电信杨经理：18086037358

5.3 开放端口

提交网络信息安全承诺书（单位盖章）和开放端口申请书（客户经理盖章），备案系统里面发起变更接入，提交申请。具体流程可咨询相关工作人员：

电信客户经理：18907191612；

业务人员QQ号：1309195803；

5.4 业务域名限制

1）每个小程序帐号支持配置最多200个域名；

2）每个域名支持绑定最多100个主体的小程序；

3）域名只支持https协议，不支持IP地址；

4）业务域名需经过ICP备案，新备案域名需24小时后才可配置；

5）域名格式只支持英文大小写字母、数字及“- ”；

6）配置业务域名后，可打开任意合法的子域名；

小程序项目

1. 市场项目

交通类小程序：“车来了精准试试公交”小程序主要功能：城市切换、线路搜索、附近路线、最近使用、线路收藏
电商类小程序：“京东购物”小程序主要功能：基础购物功能满足用户购物全路径需求，差异化“购物圈”栏目功能满足轻量级社交功能，细节功能微调实现小程序内快速跳转
金融类小程序：“农行微服务”小程序主要功能：预约服务、精选优惠券、附近优惠
母婴类小程序：“护婴岛”小程序主要功能：到店扫码购，快速送，活动资讯
餐饮类小程序：“i麦当劳”小程序主要功能：点餐、储值、会员管理、品牌理念传达
物流类小程序：“圆通小APP”小程序主要功能：寄件、查件、客诉
生活类小程序：“万达电影+”小程序主要功能：影院选择、电影票购买、订单列表

2. 中心项目

应用场景总结

小程序具有无需安装，使用便捷的优点，适用于面向公众的，工具内容型，生活服务型的应用场景。

不适用于交互要求高，视觉要求高的场景。