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 function和VM304 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 objectat 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合法域名

HBuilderX搭建微信小程序；HBuilderX开发uni-app微信小程序；uni-app开发微信小程序；使用uni-app搭建微信小程序；使用uni-ui模板搭建微信小程序步骤相关推荐

html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
外卖券微信小程序源码带教程cps淘客二次开发服务器模块可代搭建
外卖返利cps分销系统每日领卷美团优惠券红包流量小程序搭建源码外卖红包小程序美团外卖小程序饿了么外卖小程序美团饿了吗红包,先领红包再下单.外卖红包,cps分成,别人领红包下单,你拿佣金. 美团 ...
超市微信小程序怎么做_微信小程序便利店怎么开？便利店和百货超市怎么开发小程序？...
微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?下面跟随小编一起来看看吧! 现在很多商家还在小程序是什么,流行的说法是开店到微信,创建一个互联网离线模式,将近五公里的小程序显示出来,只要别人用 ...
微信小程序（应用号）实战课程之记账软件开发
http://git.oschina.net/dotton/finance [2016-10-12] 更新缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持dat ...
微信小程序一小程序的创建、宿主环境、常用组件、开发上线等
小程序简介 1. 小程序与普通网页开发的区别运行环境不同网页运行在浏览器环境中小程序运行在微信环境中 API 不同由于运行环境的不同,所以小程序中, 无法调用 DOM 和 BOM 的 API. ...
微信公众号菜单添加小程序，miniprogram，pagepath参数详解，php开发公众号
随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
微信公众号、小程序开发——1、客服消息+简易自开发回复平台
一.客服消息"咨询-回复"方式 1.咨询方式公众号:公众号主页发送各类型消息后,会在公众号后台收到用户消息. 小程序:在小程序网页中添加"客服按钮",进入客服 ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...

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

HBuilderX搭建微信小程序；HBuilderX开发uni-app微信小程序；uni-app开发微信小程序；使用uni-app搭建微信小程序；使用uni-ui模板搭建微信小程序步骤相关推荐

最新文章

热门文章