我的小程序应用开发指南

做者：HerryLo

原文永久连接： https://github.com/AttemptWeb/Record...

小程序依附于各大平台，支付宝、微信、头条、百度等小程序，都是在平台上进行开发，平台提供对应的技术支持和用户环境。对于我的开发者，这个仍是蛮方便的，它自己带有流量属性，易于传播。

便捷开发

最近在弄本身的小程序，因此整一篇文章总结一下。若是你已经开发太小程序，这篇文章能够不用看了。

小程序开发至关的便捷，配合官方文档，微信小程序文档、支付宝小程序文档，便可在本地运行起来，若是只是单纯的展现，那只须要开发完以后上传，等待审核了。只须要一点前端基础，就可开发一个本身的小程序，有想法的同窗能够行动起来。

若是在开发中出现问题，也能够在小程序社区求助，微信小程序社区。

不是在给官方推广。若是你但愿开发属于本身的应用，小程序是一个能够快速入手的方案，便捷开发，快速发布，自带传播功能。下面我选中微信小程序讲解。

微信原生小程序开发

微信小程序文档

<!-- 项目目录结构 -->

|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir           
|   |—— index               index页面
|   |  |—— index.js         index.js- js逻辑文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml页面结构
|   |  |—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json     项目配置
|—— sitemap.json            爬虫文件复制代码

将项目导入到小程序开发工具中，就能够开始开发了。添加页面，直接在pages目录添加新的文件目录。具体细节参考微信小程序文档

语法支持：

• 目前最新版本库已经 支持Es6 / Es7，async/await 和 Promise；
• 开发工具会将代码转换成Es5 语法，保证各类机型的样式适配；
• 部分语法相似于vue和react；

组件支持：

• 提供 template 模板支持, 微信小程序 template模版；
• Component自定义组件支持，组件内部存在生命周期, Component自定义组件；

API支持：

• 能够调用封装过的系统原生方法，好比蓝牙、网络信息、扫码等API方法；
• 常规的方法如：Storage、Reqeuest、Animation、Canvas等，更多能够查看微信小程序 API；

除小程序原生开发外，固然也可使用框架了，我我的以为 Taro框架不错，支持多端小程序开发。

Taro开发

Taro开发文档，Taro 支持多端开发，包括微信/百度/支付宝/头条小程序、H五、React-Native，目前我只使用开发过微信小程序和支付宝小程序、H5，其余的尚未尝试过。

|—— config                              开发配置文件
|—— dist                                目标文件目录
|—— src                                 开发目录
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page页面目录
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局样式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md复制代码

语法支持：

• ts 语法支持；
• React语法规范；
• 支持使用 CSS 预编译器；
• Es6/Es7 语法支持，若是须要更新的语法，能够在配置config配置；

组件支持：

• react组件式开发，不过最后仍是会编译成原生小程序；

npm包：

• 支持使用 npm/yarn 管理；
• 可使用 Redux 进行状态管理；

API：

• 对小程序API、H5 API进行一次封装，更加方便；

react + ts + npm包，基本就是前端开发正常节奏。不论你开发的那个小程序，只须要运行对应的命令，同时，将dist目录文件导入到开发工具中，便可看见效果。

taro和原生小程序

原生小程序：上手快，对于接触过前端开发的同窗，能够立刻上手，基本不存在技术壁垒。面向微信小程序文档编程。

Taro开发：react语法规范，react组件开发，ts语法支持，支持redux。对于react有偏好的同窗，强烈推荐。若是你喜欢react，建议使用Taro开发。(易于团队协做)。

小程序开发问题

• 微信小程序 不可使用cookie

• 微信小程序 非HTTPS的域名不被支持

• 微信小程序 分享API是同步操做，同时回调成功失败被没法监听

• 微信小程序 wx.setStorageSync和wx.getStorageSync的API会频繁报错

• 微信小程序 setData数据的1M限制，经过数据数据拆分能够解决

• 微信小程序 主包的限制2M，致使没法引入过多的外部文件（使用Taro会依赖npm包）

• 微信小程序 微信开发工具占用CPU太高，致使电脑卡顿

固然问题确定不止这些，还有微信小程序原生组件、API、官方插件等问题，这里不一一细讲了，对于想作本身小程序的同窗，这些基本够用。

不过可能会有人问，框架不是尚未讲嘛？其实使用Tora开发小程序，你只是在使用不一样的语法，在编写小程序，最后，命令工具都会将文件转换成原生小程序的文件格式。

我的应用

不论你使用哪种方式，开发你的我的应用，最后都会回归到产品自己上。经过技术完成本身心目中的我的应用，将应用提供给用户，这个才是终极目标。（技术只是手段，产品才是目标）不过我我的使用Taro开发，算是尝尝鲜。

废话很少说，但愿我的项目源码能够帮助到你们

github: wxSapp 我的小程序源码

目前正在整 github: flutter 我的应用 ，有兴趣能够看看。

ps: 顺便推一下本身的我的公众号：Yopai，有兴趣的能够关注，每周不按期更新，分享能够增长世界的快乐