blog
blog copied to clipboard
Published
20 hours ago •
yongheng2016
yongheng2016
微信小程序开发注意事项
微信小程序开发
一、注意事项:
-
小程序组件开发限制：
-
原生组件
-
map
- 地图样式较少，不能满足复杂开发需求
- api较少，不能满足复杂渲染需求；
-
canvas
- 当涉及大量数据需要滚动展示时，由于原生组件的限制，实现成本和效果不太理想；
- camera
- input（仅在focus时表现为原生组件）
- live-player
- live-pusher
- textarea
- video
-
map
-
web-view 即H5页面嵌入
- 纯粹的移动端web页面开发，调用小程序相关api调用受限
- 每个页面只能有一个
<web-view>，<web-view>会自动铺满整个页面，并覆盖其他组件。 -
<web-view>网页与小程序之间不支持除 JSSDK 提供的接口之外的通信
-
原生组件
-
业务沟通
- 因为公司大部分业务都有图表，地图相关，所以开发之前和项目经理及UI沟通相关业务实现方案;
二、准备工作：
-
业务设置: 微信公众平台
- 开发成员名单（添加开发人员微信号）
- api（必须都是https协议）:
- request 后端接口域名白名单(包括web-view Ajax 请求域名)
- web-view 外部嵌入网页域名白名单(包括iframe网页域名)
-
客户资源
- 小程序名称: 姓名展示名称
- 小程序搜索栏关键字: 通过关键字搜索到小程序
- 附近的小程序设置: 引导客户正确的设置流程
三、开发选型：
-
框架选型：
-
原生开发
- 小程序request 原生ajax;
- 状态管理;
- promise
-
mpVue 美团
- 彻底的组件化开发能力：提高代码复用性
- 完整的
Vue.js开发体验 - 方便的
Vuex数据管理方案：方便构建复杂应用 - 快捷的
webpack构建机制：自定义构建策略、开发阶段 hotReload - 支持使用
npm外部依赖 - 使用
Vue.js命令行工具vue-cli快速初始化项目 - H5 代码转换编译成小程序目标代码的能力
-
WePy 腾讯
- WePY借鉴了Vue.js的语法风格和功能特性
- 开发风格 接近于
Vue.js，支持组件Props传值，自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等等 - 编译器 支持样式编译器：
Less/Sass/Styus，模板编译器：wx-ml/Pug，代码编译器：Babel/Typescript。 - Promise 通过 polyfill 让小程序完美支持 Promise，解决回调烦恼
- 框架大小 压缩后 24.3KB 即可拥有所有框架功能，额外增加 8.9 KB后即可使用 Promise 和 Async Function
-
Taro 京东
- 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/字节跳动/支付宝小程序、H5、React Native 等平台的应用。
- 语法风格 采用React语法标准，支持JSX书写，让代码更具表现性
- TypeScript 全面支持TypeScript，提供更强大的生产力
- 配套的开发工具Taro CLI让开发流程自动化，一切都从一行命令开始
-
-
编辑器选型
-
小程序开发工具
- 代码提示，高亮等体验极差；
- 其他编辑器或IDE
- 若用原生开发需要额外插件支持且效果一般
- 额外插件存在api支持滞后
- 若用框架开发 代码提示，高亮等体验较好；
-
小程序开发工具
四、开始编程
五、体验
- 体验：在开发初期尽量不要发布线上版本，可通过体验版来测试
六、发布
- 发布: 人工审核，工作日审核1小时左右(经验值,不一定准),非工作日延后审核
最后:
- 使用小程序原生手写项目避免小程序的更新迭代带来的不必要的问题;
- 使用框架解决了小程序小程序本事带来的许多问题, 能把更多注意力放在开发上; 但框架本事也同时带来了一些不必要的bug;小程序的更新迭代也不一定能及时跟进
后续： 结合公司具体业务情况，走合适的开发体验；
展示
[slide]
微信小程序开发
[slide]
一、注意事项:
[slide]
小程序组件开发限制：
+ [原生组件](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
+ [<u>map</u>](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
+ 地图样式较少，不能满足复杂开发需求
+ api较少，不能满足复杂渲染需求；
+ [<u>canvas</u>](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)
+ 当涉及大量数据需要滚动展示时，由于原生组件的限制，实现成本和效果不太理想；
+ [camera](https://developers.weixin.qq.com/miniprogram/dev/component/camera.html)
+ [input（仅在focus时表现为原生组件）](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+ [live-player](https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html)
+ [live-pusher](https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html)
+ [textarea](https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)
+ [video](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)
[slide]
+ web-view 即H5页面嵌入
+ 纯粹的移动端web页面开发，调用小程序相关api调用受限
+ 每个页面只能有一个 <web-view>，<web-view> 会自动铺满整个页面，并覆盖其他组件。
+ <web-view>网页与小程序之间不支持除 JSSDK 提供的接口之外的通信
[slide]
业务沟通
+ 因为公司大部分业务都有<u>**图表**</u>，<u>**地图**</u>相关，所以开发之前和项目经理及UI沟通相关业务实现方案;
[slide]
二、准备工作：
[slide]
业务设置: 微信公众平台
+ 开发成员名单（添加开发人员微信号）
+ 域名配置（<u>必须都是**https**协议</u>）:
+ 服务器域名
+ request 后端接口域名白名单(包括web-view Ajax 请求域名)
+ socket合法域名
+ uploadFile合法域名
+ downloadFile合法域名
+ 业务域名
+ web-view 外部嵌入网页域名白名单(包括iframe网页域名)
[slide]
客户资源
1. 小程序名称: 姓名展示名称
2. 小程序搜索栏关键字: 通过关键字搜索到小程序
3. 附近的小程序设置: 引导客户正确的设置流程
[slide]
三、开发选型：
[slide]
框架选型：
[slide] + ### 原生开发 + 小程序request 原生ajax 并发处理; + 状态管理; [slide]
mpVue 美团
+ 彻底的组件化开发能力：提高代码复用性
+ 完整的 `Vue.js` 开发体验
+ 方便的 `Vuex` 数据管理方案：方便构建复杂应用
+ 快捷的 `webpack` 构建机制：自定义构建策略、开发阶段 hotReload
+ 支持使用 `npm` 外部依赖
+ 使用 `Vue.js` 命令行工具 `vue-cli` 快速初始化项目
+ H5 代码转换编译成小程序目标代码的能力
[slide]
WePy 腾讯
+ WePY借鉴了Vue.js的语法风格和功能特性
+ 开发风格 接近于 `Vue.js`，支持组件 `Props`传值，自定义事件、组件分布式复用`Mixin`、计算属性函数`computed`、模板内容分发`slot`等等
+ 编译器 支持样式编译器：`Less/Sass/Styus`，模板编译器：`wx-ml/Pug`，代码编译器：`Babel/Typescript`。
+ Promise 通过 polyfill 让小程序完美支持 Promise，解决回调烦恼
+ 框架大小 压缩后 24.3KB 即可拥有所有框架功能，额外增加 8.9 KB后即可使用 Promise 和 Async Function
[slide]
Taro 京东
+ 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/字节跳动/支付宝小程序、H5、React Native 等平台的应用。
+ 语法风格 采用React语法标准，支持JSX书写，让代码更具表现性
+ TypeScript 全面支持TypeScript，提供更强大的生产力
+ 配套的开发工具Taro CLI让开发流程自动化，一切都从一行命令开始
[slide]
编辑器选型
+ [小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getstart.html#%E5%AE%89%E8%A3%85%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7)
+ 代码提示，高亮等体验极差；
+ 其他编辑器或IDE
+ 若用原生开发需要额外插件支持且效果一般
+ 额外插件存在api支持滞后
+ 若用框架开发 代码提示，高亮等体验较好；
[slide]
四、开始编程
- 小程序开发文档 [slide]
五、体验
- 体验：在开发初期尽量不要发布线上版本，可通过体验版来测试 [slide]
六、发布
- 发布: 人工审核，工作日审核1小时左右(经验值,不一定准),非工作日延后审核
[slide]
七、问题：
- 旧项目项目迁移：想把之前的一部分web端迁移到小程序端
- 迁移成本：react -> 小程序（web-view）
- 项目还原度：原PC端布局基本需要重新处理
- 新项目设计：
- 项目经理注意事项：
- 设计复杂度（结合项目具体分析）
- UI注意事项：
- 设计复杂度（结合项目具体分析）
- 项目经理注意事项：
[slide]
最后
- 使用小程序原生手写项目避免小程序的更新迭代带来的不必要的问题;
- 使用框架解决了小程序小程序本事带来的许多问题, 能把更多注意力放在开发上; 但框架本事也同时带来了一些不必要的bug;小程序的更新迭代也不一定能及时跟进
后续：
- 结合公司具体业务情况，走合适的开发路线；
[slide]
讨论：
- 为什么要做移动端，或微信移动端？
- 客户要求？
- 卖点？
- 使用方便？
- 如果必须要做移动端，应该做H5 webAPP还是微信小程序？
- 小程序很多局限性：
- 审核机制
- 内部组件本身就要bug
- 开发体验较差
- 技术栈迁移成本较高
- H5 webAPP
- 技术栈没有迁移成本，和现有PC端一样的开发体验
- 上面说的小程序的坑在webAPP上基本不存在，减少大量开发成本！
- 小程序很多局限性：
