HBuilderX搭建微信小程序;HBuilderX开发uni-app微信小程序;uni-app开发微信小程序;使用uni-app搭建微信小程序;使用uni-ui模板搭建微信小程序步骤

1.选择模板 uni-ui
在这里插入图片描述

2.得到创建项目
在这里插入图片描述

3.获取APPid

在微信小程序电脑后台获取APPID
这个方法适用于自己申请的微信小程序(自己用的小程序)
打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆

在这里插入图片描述
在这里插入图片描述

4.项目打包 打包后运行在微信小程序工具 才不会报错,如果报错app.json问题,查看此篇文章解决app.json问题
打包后多以文件夹 unpackage

打包方法:
HBuilderX打包方法
在这里插入图片描述

vue-cli打包方法
在这里插入图片描述

5.打包后,微信小程序工具打开项目 ,如果报以下错误,看图操作

报错信息:
 common/main.js:
 TypeError: window.WeixinJSBridge.beforeinvoke is not a functionVM304 WAService.js:1 TypeError: window.WeixinJSBridge.beforeinvoke is not a function
 和
 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object
    at Object.t.wasm_initialize (VM304 WAService.js:1)

在这里插入图片描述

在这里插入图片描述

6.微信小程序部分设置:
1.是否勾选不校验合法域名??勾中后,在开发时候就不会校验某些域名,例如下载文件和图片时候就不会校验图片的域名地址;但是必须要在小程序后台开发配置好对应域名,否则本地测试可以,但线上就会报域名错误;而不选中就可以在开发时候看到错误信息
2.设置代理和端口
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

7.运行到微信小程序
在这里插入图片描述

8.小程序发布需要先设置:
将appID填入到使用uni-app开发的项目manifest.json中

在这里插入图片描述

9.具体发布小程序看 发布小程序流程

10.因为我们使用的是uni-ui,所以必须要有uni-ui的样式,这里我已经将hello-uniapp-master官方演示案例下的common拿了过来
全局使用uni-ui的样式,在App.vue中引入uni.css;
同时在这一步开启小程序发布后,自动更新提示,自动更新最新版本小程序
在这里插入图片描述

11.初始化npm工程

若项目之前未使用npm管理依赖(项目根目录下无package.json文件),先在项目根目录执行命令初始化npm工程:

npm init -y

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有,需要通过初始化命令来创建。

12.vuex配置,vuex封装
注意:
1.uni-ui自带store 不需要再重新安装,可以直接创建store文件引入使用
2.在main.js内,将store对象挂载到vue实例中

13.接口uni.request请求接口封装

14.创建项目根目录下components文件夹,放公共vue组件

15.对微信小程序进行分包,uni-app分包步骤(如果不分包,后期打包代码太大会导致二维码预览失败,无法真机调试)

16.微信登录看这篇

17.如果需要自定义微信小程序的导航栏,点击微信小程序自定义tabBar

18.正式开发时候,配置好请求后,在浏览器H5页面和微信小程序工具上,调用接口是正常的,但是真机预览时候,使用真正的手机去调接口,如果没有配置在小程序官方地址上配置ip,那请求接口会无效。

配置ip:在小程序–开发–开发管理–开发设置–服务器域名–request合法域名

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/i_am_a_div/article/details/117123206