前言

最近在用mpVue做微信小程序现在记录一下整个微信小程序从申请到发布流程至于mp-vue技术坑点可以查看笔者之前的文章

1. 小程序申请注册

打开微信公众平台的地址（https://mp.weixin.qq.com/）点击立即注册 => 选择小程序类型

按照流程完善信息

注意点：

1. 每个邮箱只能注册一个小程序，注册过公众号的邮箱也是不能再注册了的

2. 注册过程中可以选个人开发者，个人开发小程序是免费的，企业级小程序开发需要300元的认证费用。最后只要上传下个人的身份证相片就可以了

2.小程序开发环境搭建

下载小程序开发工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18102614）

选择稳定版

3. 原生小程序开发

打开开发者工具填写申请的小程序appid

默认会生成原始目录

里面的文件和具体内容参看小程序开发文档（https://developers.weixin.qq.com/miniprogram/dev/framework/）

按照文档进行原生开发

4. Mp-vue开发小程序（强烈推荐）

官网教程（http://mpvue.com/）

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

· 彻底的组件化开发能力：提高代码复用性

· 完整的 Vue.js 开发体验

· 方便的 Vuex 数据管理方案：方便构建复杂应用

· 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

· 支持使用 npm 外部依赖

· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

· H5 代码转换编译成小程序目标代码的能力

在未来最理想的状态是，可以一套代码可以直接跑在多端：WEB、小程序（微信和支付宝）、Native（借助weex）

5. Ui框架选择

1. 原生自带的组件

2. 第三方ui框架

WeUI: 一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

iView Weapp: 与iView（基于 Vue.js 的开源 UI 组件库）同一组织产出的微信小程序UI组件库。

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用

6. 小程序预览与发布

预览：开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验

发布：代码上传，开发者工具左侧菜单栏选择"项目"，点击"上传"即可将代码上传到微信小程序服务器。整个流程是提交->审核->发布。

7. 小程序技术架构特点

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。

使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。

使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。

架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。

8. 小程序开发规范

规范这块因为建议直接使用mp-vue进行开发小程序所以按照vue的规范来进行代码管理即可（前端开发规范可参考https://juejin.cn/post/6844904034692759566）

9. 小程序开发注意事项

1. 开发微信小程序时建议用 iPhone6 作为视觉稿的标准。工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。

2. 经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至更多层级的嵌套都是支持的。不过官方并不推荐级联的这种写法，因为考虑到后面切Native的扩展可能，会没办法支持级联选择。保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱

3. 小程序会加入自动补全css前缀，使用的插件是postcss的autoprefixer，设置的兼容级别是> ios 8及> android 4.1。我们在写css的时候只需要写没有前缀的写法。比如：display:flex，工具自动编译为display:flex;display:-webkit-flex