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