微信小程序注册&开发&发布流程(个人版) 1. 小程序注册
2. 开发 2.1 开发及调试工具 2.2 开发步骤 2.2.1 新建项目 使用HBuilder创建项目,点击文件—>新建—>项目,如图:
在弹出的窗口选择uni-app,填写项目名称和项目地址,然后我们可以根据需求选择模板,这里我选择使用内置uni-ui的模板,如图:
创建完成后的目录如下:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
为了方便我们在创建一个common目录如图,因为我们使用的是uni-ui,所以必须要有uni-ui的样式,这里我已经将hello-uni-app官方演示案例下的common拿了过来,如下图所示:
全局使用uni-ui的样式,在App.vue中引入uni.css;
@import "./common/uni.css";
此时,项目创建完成,现在我们就可以运行了,前提是必须安装微信开发者工具,才能调试微信小程序
2.2.2 运行项目 选择要运行的项目页面,创建项目完成后,默认会生成index页面,进入index页面,Ctrl+R运行,弹出界面如下:
根据需求选择点击运行,
如果是小程序,则需要配置小程序的安装路径,确保能够打开小程序开发者工具。
运行配置,主要配置开发工具的安装路径,确保能够打开并调试程序,如图:
点击运行设置后,在弹出的页面配置开发工具的安装路径,如图:
执行步骤2,选择微信开发者工具,在1或者2之间都可以选择,选择完成后会自动打开微信开发者工具,自动编译运行,在HBuilder的控制台会出现对应的控制台窗口,如下图:
2.2.3 优化调试
当存在多个页面时,运行项目默认打开index页面,我们可以自定义配置调试页面。
我在pages目录下新建了一个页面page1,并且同事创建出了存放page1页面的同名目录,已经将page1注册到了pages.json中。接下来就开始配置启动页,我们让启动页为刚创建的page1页面。
"condition":{
"current":1,
"list":[
{
"name":"page1",
"path":"pages/page1/page1"
}
]
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0R3CoQ0-1593593419644)(F:\WuDaInfo-Xian\学习笔记\images\2020-07-01_113356.png)]
保存,点击控制台的重新运行。
回到微信开发者工具,选择指定的编译页面,这是就可以看见我们刚才配置的名为page1的页面。
到这里,开发流程基本结束。
备注:
3. 小程序发布 3.1 将appID填入到使用uni-app开发的项目manifest.json中。
经过编译后在微信小程序开发者工具可以看见小程序的基本信息,
3.2 上传
上传完成后,回到小程序管理后台。在版本管理中可看见刚才上传的开发版本。
3.3 提交审核
点击提交审核,然后填写提交审核表单,最后提交,完成后可在版本管理中看见审核版本。
3.4 审核完成后会自动生成线上版本
审核完成后会自动生成线上版本,最后手动点击发布,发布完成后,可能有一些延迟,过10分钟以后就可以在小程序中搜索到自己的小程序。