使用uni-app开发微信小程序流程

微信小程序注册&开发&发布流程(个人版)

1. 小程序注册

在这里插入图片描述

  • 官网给出的发布流程:

在这里插入图片描述

  • 注册完成后应该可以看见自己的小程序id(本人由于原来账号被冻结,所以将自己原来的小程序账号找回后的操作)

    截图如下:

在这里插入图片描述

2. 开发

2.1 开发及调试工具

2.2 开发步骤

2.2.1 新建项目

  1. 使用HBuilder创建项目,点击文件—>新建—>项目,如图:

在这里插入图片描述

  1. 在弹出的窗口选择uni-app,填写项目名称和项目地址,然后我们可以根据需求选择模板,这里我选择使用内置uni-ui的模板,如图:

在这里插入图片描述

  1. 创建完成后的目录如下:

    ┌─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            配置页面路由、导航条、选项卡等页面类信息,详见
    

在这里插入图片描述

  1. 为了方便我们在创建一个common目录如图,因为我们使用的是uni-ui,所以必须要有uni-ui的样式,这里我已经将hello-uni-app官方演示案例下的common拿了过来,如下图所示:

在这里插入图片描述

  1. 全局使用uni-ui的样式,在App.vue中引入uni.css;

    @import "./common/uni.css";
    

在这里插入图片描述

此时,项目创建完成,现在我们就可以运行了,前提是必须安装微信开发者工具,才能调试微信小程序

2.2.2 运行项目

  1. 选择要运行的项目页面,创建项目完成后,默认会生成index页面,进入index页面,Ctrl+R运行,弹出界面如下:

在这里插入图片描述
根据需求选择点击运行,

如果是小程序,则需要配置小程序的安装路径,确保能够打开小程序开发者工具。

  1. 运行配置,主要配置开发工具的安装路径,确保能够打开并调试程序,如图:

在这里插入图片描述

点击运行设置后,在弹出的页面配置开发工具的安装路径,如图:

在这里插入图片描述

  1. 执行步骤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中。

在这里插入图片描述

2020-06-22_115849.png

经过编译后在微信小程序开发者工具可以看见小程序的基本信息,

在这里插入图片描述

3.2 上传

在这里插入图片描述

上传完成后,回到小程序管理后台。在版本管理中可看见刚才上传的开发版本。

在这里插入图片描述

3.3 提交审核

点击提交审核,然后填写提交审核表单,最后提交,完成后可在版本管理中看见审核版本。

在这里插入图片描述

3.4 审核完成后会自动生成线上版本

审核完成后会自动生成线上版本,最后手动点击发布,发布完成后,可能有一些延迟,过10分钟以后就可以在小程序中搜索到自己的小程序。

在这里插入图片描述

3. 小程序审核不通过的原因

  1. 小程序服务类目所对应的页面中的核心内容与该类目是否一致。
  2. 类目与页面提供的内容是否一致。
  3. 小程序简介没有介绍小程序功能。
  4. 小程序提供的服务和内容必须是正式的,不能以测试内容提交,多次以测试内容提交。
  5. 部分图片显示被压缩体检不好。
  6. 搜索框及少数下才能选中,页面评论点击无响应,页面图片分辨率尺寸失真。
  7. 不得展示和推荐第三方小程序。比如:不能做小程序导航,不能做小程序链接互推,小程序排行榜等。
  8. 含有声音视频内容,没有补充相关对应类目。
  9. 有账号体系的小程序,除自有登录方式,必须支持微信授权登录。
  10. 必须保证用户在该页面能使用该服务类目,不得隐藏,不得进行多次跳转。
  11. 首页图片与文字有互相重叠。
  12. 存在虚拟物品在线交易, ios系统需要走IAP,小程序暂不支付,请留意后续。
  13. 必须登录才能使用的服务,请提供测试账号。
  14. 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等,要求用户分享、添加、关注或下载后才可操作的程序,
  15. 含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序,通过利益诱惑诱导用户分享、传播的小程序,用夸张言语来胁迫、引诱用户分享的小程序,强制或诱导用户添加小程序的,都将会被拒绝。

官方给出的常见拒绝情形

4. 附加

4.1 配置服务器域名

进入小程序后台管理系统,点击左边的开发—>开发设置—>服务器域名,然后点击修改,就可以配置,如图:

在这里插入图片描述
新手一枚,不喜勿喷,如有错误,请留言指出
.---- -. -. . . .
( .’,----- - - ’ ’
_/ ;–:-\ --------------------
U__n^_’’[. |ooo__ | |!||!||!||!| |
c(_ …(_ …(_ …( /,] | |||||||| |
,
_
|,L______],|_____________________|
/;
(@)(@)==(@)(@) (o)(o) (o)(o)–(o)(o) **

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章