theme: smartblue
highlight: dark
创建项目
创建后的项目
亦可以使用uniapp vue-cli 创建项目
vue create -p dcloudio/uni-preset-vue my-project
使用vue3/vite 创建项目（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
创建后的目录如下 （uview框架不支持vue3）
运行项目使用 yarn dev:mp-weixin
打开小程序开发工具引入打包后的dist包下weixin 包即可在开发工具中使用，打包发布同样
setup语法vue3中没有this指向，所以要引入语法 如 import {onShow} from '@dcloudio/uni-app'** 下面是个demo 示例**
** 控制台信息如下得知使用vite编译，意味着我们能更快启动编译以及打包，具体webpack与vite对比请自行查阅官网**
1.打开终端 输入代码npm install uview-ui 具体参考官网 u-view
2.引入全局uView
import uView from 'uview-ui'
Vue.use(uView)
//使用rpx
uni.$u.config.unit = 'rpx'
3.在uni.scss 中引用 @import 'uview-ui/theme.scss';
4.在pages.json配置easycom组件模式
"easycom": {
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
"^u-(.*)": "uview-ui/components/u-/u-.vue"
// "^u-(.*)": "@/uview-ui/components/u-/u-.vue"
},
重启一下HBuilderX后该UI框架已经引入该项目中了
正式开发 配置页面创建新的页面,并在page.json注册,并且设置状态栏等信息(具体参考uniapp官网)
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页",
"navigationBarBackgroundColor":"#fff",
"navigationStyle":"default",
"navigationBarTextStyle":"black",
"enablePullDownRefresh":false,
}
}
配置tarbar官网tarbar
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "home"
}]
},
已知uview 有两种安装方式（npm配置，### Hbuilder配置）方法大同小异
此处不在展示
npmp配置
下载方式配置
下载vant小程序源码 地址vant-weapp: 轻量、可靠的小程序 UI 组件库vant-weapp: 轻量、可靠的小程序 UI 组件库
首先在src目录下创建wxcomponents/vant目录
再次把下载的源码dist包"内容"放在vant目录下即可(注意不是dist文件夹而是dist包内的组件文件夹)
此处是为了使用uniapp的easycom的机制，自动引入组件
注意目录结构 这样就不需用使用usingCompoents了，编译后会帮我们自动注册
在page.json中添加
"easycom": {
"custom": {
"^van-(.*)": "@/wxcomponents/vant//index"
}
},
最后在需要的页面中直接使用组件即可
最后发布小程序如果未使用的组件可以删除 减小包的体积
自定义tarbart,导航栏1-1.需要在App.vue onShow中隐藏原有的tarbar
uni.hideTabBar()
1-2.创建通用组件 可以使用u-view中的tarbar组件也可以自定义组件的样式,直接在页面中使用
easycom是自动开启的，不需要手动开启。
只需要在components目录下创建相同的名称,且是components/组件名称/组件名称.vue目录结构,就不需要在页面引用注册点我查看官网地址
u-view tarbar组件
具体业务逻辑,页面UI 我就不在此展示了
2-1.在page.json中 设置页面style "navigationStyle": "custom",去除原生的样式
2-2.在页面中引入自定义导航栏组件即可使用,如上图所示
u-view navbar组件)
使用自定义组件需要注意iphonex 以上机型的底部高度
.box { padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); }
如果改变u-view 组件样式 则需要重点注意一下两点
点击查看官网详情
3-1.在app和h5 中一般通过v-deep或/deep/指令修改
3-2.在微信小程序中则需要在父组件的类名下更改
组件类名为.navbar 微信小程序必须使用 /deep/
上图为微信小程序官方登陆示意图
使用uni.login
由上图可得知我们需要拿uni.login（）返回的code获取登陆状态
打开manifest.json 打开微信小程序 设置appid且该appid需要与后端的appid一致
后端与微信服务器请求得到openid与session_key,这时后端可自定义登陆状态
讲一下我的登陆页面流程
在home页面中判断有无登陆后存在本地的信息，如用户信息，token等，我使用的是用户手机存在本地，
本地无信息的情况跳转到登陆页面，用户点击button登陆且更新用户信息，然后返回home页面加载其他信息
本地已有信息，执行uni.login()更新token，防止用户token过期，最好写在onload()中，不用每次都登陆
获取用户信息
使用uni.getUserProfile()必须是点击事件下获取 getUserInfo获取的是匿名数据，无法使用
且只能获取到用户昵称头像信息，其他获取不到
每次点击都需要用户授权
获取手机号码
两种方法 我都使用过 目前使用的是第一种方法 第二种方法需要单独去获取uni.login的code一块传值给后端1.使用getPhoneNumber的接口 此方法必须是小程序已经认证过了地址
通过getphonenumber方法返回的值 如下图所示
后端可以获取code（动态令牌）实现登录并且在后端解密手机号码 具体方法如下地址
使用button组件 open-type=“getPhoneNumber” @getPhoneNumber = getPhoneNumber 的点击事件获取加密的手机号码，在此推荐使用后端解密 可以获取uni.login 返回的code后一块传给后端既完成登陆也获取手机注册等信息 地址
封装请求可以使用uview 封装好的方法，也可以自己封装
多数据请求loading处理同时发起多个数据请求，判断上个请求是否结束，如果上个请求结束&& 本次请求结束 关闭loading
参考其他loading封装的思路
`// const baseUrl = xxxx;
var num = 0;
export default function requset(url, data = {}, method = "GET", getToken = true,isShowLoading = true, ) {
if (isShowLoading) {
num++;
uni.showLoading({
title: '加载中...',
mask: true
})
}
let token = uni.getStorageSync('token')
const header = {
'content-type': 'application/json',
}
if (getToken) {
header.Authorization = token
}
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + url,
data,
method,
timeout: 10000,
header,
success(res) {
resolve(res)
},
fail(err) {
if (err.errMsg == 'request:fail timeout') {
uni.showToast({
title: '请求超时，请重试!',
duration: 2000,
icon: "none"
});
} else if (err.errMsg == 'request:fail ') {
uni.showToast({
title: '无网络!',
duration: 2000,
icon: "none"
});
} else {
uni.showToast({
title: '服务器错误',
duration: 2000,
icon: "none"
});
}
reject(err)
},
complete() {
if (isShowLoading) {
setTimeout(() => {
num--;
console.log('第几次', num)
if (num === 0) {
uni.hideLoading()
}
}, 200)
}
}
})
})
}
//在api.js中引入次方法 并且暴露出去
import requset from './requset.js'
export function getLoginUserInfo() {
return requset('/wx/mini/getLoginUserInfo')
}
uni官方是没有路由拦截的此处使用uview的路由拦截
const request = (Vue) => {
Vue.prototype.$u.http.setConfig((config) => {
config = configs
return config
});
// 请求拦截
Vue.prototype.$u.http.interceptors.request.use((config) => {
uni.showLoading({
title: '加载中',
mask: true,
});
//设置token
config.header.Authorization = uni.getStorageSync('Authorization') || '';
return config
})
// 响应拦截
Vue.prototype.$u.http.interceptors.response.use((response) => {
if (response.data.status != 200) {
uni.hideLoading();
uni.showToast({
title: response.data.msg,
icon: 'none',
duration: 2000
})
}
return response;
}, (err) => {
uni.hideLoading();
// 对响应错误做点什么
if (err.errMsg == 'request:fail timeout') {
uni.showToast({
title: '请求超时，请重试!',
duration: 2000,
icon: "none"
});
} else if (err.errMsg == 'request:fail ') {
uni.showToast({
title: '无网络!',
duration: 2000,
icon: "none"
});
} else {
uni.showToast({
title: '服务器错误',
duration: 2000,
icon: "none"
});
}
return err
})
}
export default request;
接口请求(此处用的uview已封装的api 直接拿来使用)
const http = uni.$u.http;
const api = '/api';
//get请求
export const getUserInfo = (params) => http.get(api + '/xxx', {params})
//post 请求
export const login = (data) => http.post('/xxx', data)
获取地址
使用uni.getLocation（）获取经纬度，再次之前需要判断用户是否授权，如未授权配合uni.openSeting（）引导用户授权
使用uni.authorize()判断用户是否授权,未授权调用uni.openSeting,授权则调用uni.getLocation
uni.authorize({
scope: 'scope.userLocation',
success(res) {
uni.getLocation({
type: 'gcj02 ',
success(res) {
const latitude = res.latitude;
const longitude = res.longitude;
}
)},
fail(err) {
uni.showModal({
title: '是否开启',
content: '当前需要获取您的地理位置',
showCancel:false,
success: function(res) {
if (res.confirm) {
uni.openSetting({
success(res) { if (res.authSetting['scope.userLocation']) {
//执行你需要的请求 *** 作
} else {
uni.showToast({
title: '无法获取最近电站信息',
duration: 2000,
icon: "none"
})}}
})
}
}
});
}
})
使用微信小程序付款 uni.requestPayment() 官网地址
通常微信付款所需要的数据都由后端返回,你只需要调用这个api就行
// 仅作为示例，非真实参数信息。 uni.requestPayment({
provider: 'wxpay',//微信付款
appid:'',
timeStamp: String(Date.now()), //时间戳
nonceStr: 'A1B2C3D4E5', //随机字符串
package: 'prepay_id=wx20180101abcdefg',//统一下单接口返回的 prepay_id 参数值
signType: 'MD5',//加密方式
paySign: '',//寄吗数据
success: function (res) { console.log('success:' + JSON.stringify(res)); },
fail: function (err) { console.log('fail:' + JSON.stringify(err)); } });
hubilder 点击发行到微信小程序
打包后如果提示
在mainfest.json 打开源码视图 配置如下
分包单个分包的大小是2m 微信小程序规定不能超过20m
uniapp中使用微信小程序分包，需要在mainifest.json中开启分包官网地址如下图所示
在pages.json中配置需要的分包subPackages 官网示例地址 配置如下图所示此时已经配置完毕，运行到微信开发者工具，点击详情，此时已经显示我们添加分包完成
后续消息订阅欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）