微信小程序开发流程和方案

2,957 阅读4分钟

前言

最近在用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