# 小程序个人开发指南

原文永久链接： https://github.com/AttemptWeb/Record... (opens new window)

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

# 便捷开发

最近在弄自己的小程序，所以觉得整一篇文章总结一下。如果你已经开发过小程序，同时开发过自己的小程序，这篇文章可以不用看了。如果你想开发自己的个人应用，这篇文章会很适合你。

小程序开发相当的便捷，配合官方文档，微信小程序文档 (opens new window)、支付宝小程序文档 (opens new window)，即可在本地运行起来，如果只是单纯的展示，那只需要开发完之后上传，等待审核了。只需要一点前端基础，就可开发一个自己的小程序，有想法的同学可以行动起来。

如果在开发中出现问题，也可以在小程序社区求助，微信小程序社区 (opens new window)。

不是在给官方推广。如果你希望开发属于自己的应用，小程序是一个可以快速入手的方案，便捷开发，快速发布，自带传播功能。下面我选中微信小程序讲解。

# 微信原生小程序开发

微信小程序文档 (opens new window)

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

|—— 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            爬虫文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

语法支持：

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

组件支持：

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

API支持：

可以调用封装过的系统原生方法，比如蓝牙、网络信息、扫码等API方法；
常规的方法如：Storage、Reqeuest、Animation、Canvas等，更多可以查看微信小程序 API (opens new window)；

除小程序原生开发外，当然也可以使用框架了，我个人觉得 Taro框架不错，支持多端小程序开发。

# Taro开发

Taro开发文档 (opens new window)，Taro 支持多端开发，包括微信/百度/支付宝/头条小程序、H5、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