微信小程序开发到上线流程主要分为以下几个步骤:小程序注册、完善小程序信息、小程序项目开发、小程序审核发布。
准备工作
小程序注册
注册小程序 进入平台没有注册过的按照提示信息注册账号,有个人账号和企业账号(只有企业账号才有支付功能)区分,手机快捷登录的获取手机号功能,目前只针对非个人开发者,且完成了认证的小程序开放
完善小程序信息
填写小程序的基本信息,名称、头像、服务范围以及小程序介绍等信息,名称头像在HbuildX工具里面填写,如下图:
小程序项目开发
项目打包
项目打包上线需要使用到多个工具,注意工具之间的职责。
VSCode ----> 微信开发者工具 ----> 微信公众平台
//注:开发者也可独立使用 miniprogram-ci 进行小程序代码的上传等操作。
打包成其他小程序端的步骤类似,只是更换了 打包命令 和 开发者工具 。
//在终端运行打包命令 mp-weixin是我的项目里面配置的
npm run build:mp-weixin
条件编译和网页端打包(如果项目不考虑H5端可不看)
Q:按照 uni-app 规范开发可保证多平台兼容,但每个平台有自己的一些特性,该如何处理?
A:通过 条件编译,让代码按条件编译到指定平台。
条件编译语法
通过特殊注释,以 #ifdef 或 #ifndef 加 平台名称 开头,以 #endif 结尾。
多平台编译:#ifdef H5 || MP-WEIXIN 表示在 H5 端 或 微信小程序端 代码。
条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。
<script setup lang="ts">
// 微信平台特有API,需要条件编译
// #ifdef MP-WEIXIN
wx.login()
wx.requestPayment()
// #endif
</script>
<template>
<!-- 微信开发能力按钮,需要条件编译 -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="openSetting">授权管理</button>
<button open-type="feedback">问题反馈</button>
<button open-type="contact">联系我们</button>
<!-- #endif -->
</template>
<style>
/* 如果出现样式兼容,也可添加条件编译 */
page {
/* #ifdef H5 */
background-color: pink;
/* #endif */
}
</style>
可通过搜索 wx. 和 open-type 等平台关键词,快速查找需要小程序端需添加编译模式的代码。
打包到H5端
把当前 uni-app 项目打包成网页(H5)端,并配置路由基础路径。
核心技术
-
运行打包命令:pnpm build:h5
-
预览和测试,使用浏览器打开 /dist/build/h5 目录下的 index.html 文件
-
由运维部署到服务器
路由基础路径
默认的路由基础路径为 / 根路径,部分网站并不是部署到根路径,需要按运维要求调整。
// manifest.json
{
/* 网页端特有配置 */
"h5": {
"router": {
// 基础路径:./ 为相对路径
"base": "./"
}
} /* 小程序特有相关 */,
"mp-weixin": {
// …省略
},
"vueVersion": "3"
}
安卓端app预览和测试
- 运行到Android App基座后会弹出检测设备,检测到设备后点击运行即可
Android 云打包
注:IOS和Android的上传差不多,不过ios的要预览测试发行都是要在ios系统内操作
上传项目
项目打包成 dist 包后,打开微信开发者工具导入生成的 /dist/build/mp-weixin 目录打开项目,点击上传(不要使用测试的AppId,否则看不到开发工具右上角“上传”的按钮入口),如下图还可以看到自己的代码质量和问题,然后根据提示选择“确定”或“取消”。
提交审核和发布
版本管理内有个开发版本点击提交审核,按照提示信息对应填写即可,如果想撤回也可以撤回审核,一般会在7天之内通过审核,审核通过之后,收到消息登录后台,点击发布,就可以通过手机微信查看小程序了。