文档官网
https://uniapp.dcloud.net.cn/
微信公众平台
微信开发者工具
uviewui
ucharts图表
HBuilder开发者中心，管理创建的uniapp应用
夜神模拟器，不用配置就能运行
Wot Design Uni高颜值、轻量化的uni-app组件库，基于Vue3
项目创建
https://uniapp.dcloud.net.cn/quickstart-hx.html
初始项目报错
由于HBuilder内置版本过低造成，无法通过执行提示命令更新项目依赖解决，需要重新下载最新版HBuilder
HBuilder空格
在工具、设置中
uView安装注意事项
注意导入后，根据文档进行配置
运行到开发者工具
需要注意在微信开发者工具中的设置、安全设置中开启服务端口，才能运行，其他的都可以在HBuilder中设置，如开发者工具、AppId等
手机端调试记得使用IP地址访问，同一局域网，服务端记得关闭防火墙
tabBar
在pages.json中配置
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom" // 取消顶部
}
}, {
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" // 设置背景颜色
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
},
"tabBar": {
"list": [{
"text": "题库",
"pagePath": "pages/index/index",
"iconPath": "./static/index.png", // 最好图大20*20 内部图案 16*16
"selectedIconPath": "./static/index-active.png"
},
{
"text": "我的",
"pagePath": "pages/user/user"
}
]
}
}
iconfont引入
将图标加入购物车，然后下载引入css和ttf，在项目使用的地方引入并使用，注意：各平台会产生差异性，建议使用png
@import '@/static/iconfont/iconfont.css';
<i class="iconfont icon-shoucang"></i>
小程序兼容
<text>标签中不可以使用图片，只能存在文字，各平台兼容性方式：
<!-- #ifdef APP-PLUS -->
<text>这是在原生应用中显示的内容</text>
<!-- #endif -->
<!-- #ifdef H5 -->
<text>这是在H5中显示的内容</text>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<text>这是在微信小程序中显示的内容</text>
<!-- #endif -->
<script>
export default {
data() {
return {
content: ''
}
},
mounted() {
// #ifdef APP-PLUS
console.log('This is a uni-app for APP');
// #endif
// #ifdef H5
console.log('This is a uni-app for H5');
// #endif
// #ifdef MP-WEIXIN
console.log('This is a uni-app for WeChat Mini Program');
// #endif
}
}
</script>
获取微信头像和昵称
<template>
<view class="login-container">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入" />
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: '../../static/login/default_head.png'
};
},
onLoad() {
},
methods: {
onChooseAvatar(e) {
console.log(e);
console.log(e.detail.avatarUrl);
this.avatarUrl = e.detail.avatarUrl
}
}
}
</script>
其中获取昵称绑定需要@change事件：
// 昵称
onNameInput(e) {
console.log(e);
this.info.name = e.detail.value
},
跳转
JS控制：
// 跳转页面
uni.navigateTo({
url: `/pages/index/index`
})
// 跳转TabBar
uni.switchTab({
url: '/pages/index/index'
})
// 带参数，在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
// 返回上一页 （地址栏参数还是原先的）
uni.navigateBack() //默认delta:1
// 返回上上页
uni.navigateBack({
delta: 2, //返回层数
})
常见标签
view --> div
image --> img
text --> span
安卓打包
打包安卓运行版本不对应
将manifest.json中源码视图加上以下代码
"app-plus" : {
"compatible": {
"ignoreVersion": true,
},
}
安卓打包支持64位
在manifest.json中点击App常见其它设置，然后勾选支持CPU类型的arm64
自定义启动页
在manifest.json的App启动界面配置中取消启动界面显示等待雪花，然后勾选自定义启动图，上传相关图片
应用图标
在manifest.json的App图标配置中进行设置
关闭弹性滑动
就是部分安卓机会出现上下滑动拉伸问题，要禁用Android设备上的弹性滑动效果，可以在Uniapp的页面中添加以下CSS样式
<style>
html, body {
overscroll-behavior-y: none;
}
</style>
这将禁用纵向方向的弹性滑动效果。如果您想禁用水平方向的弹性滑动效果，请使用 overscroll-behavior-x 属性
请注意，这只适用于支持 overscroll-behavior CSS属性的浏览器。在一些旧版本的Android设备和浏览器中，该属性可能不被支持
推荐直接加在App.vue上，所有组件都会生效
调整顶部状态栏文字颜色
就是时间、电量等
<script>
export default {
data() {
return {
}
},
onShow() {
uni.setNavigationBarColor({
frontColor: '#000000',
});
},
methods: {
}
}
</script>
禁止过度滚动拉伸动画
即在APP端有些机型可以滚动页面，在pages.json中配置全局生效，记得重新启动
"globalStyle": {
"app-plus": {
"bounce": "none"
}
},
也可以配置单页面生效
{
"path" : "",
"style" : {
"navigationBarTitleText": "",
"app-plus":{
"bounce":"none" // 将回弹属性关掉
}
}
取消滚动条（兼容小程序）
<scroll-view class="org-container" scroll-y enhanced :show-scrollbar="false">
</scroll-view>
.org-container {
height: 100vh;
overflow: auto;
}
用户唯一标识openid
"o-0IL5NXQ9ui0IbiZOObHqhJDvow"
onLoad() {
wx.login({
success(res) {
console.log(res);
if (res.code) {
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
appid: 'wxcc6850a8a74f7a58',
secret: 'a1886dc22345dc46052d8ff17e470d9a',
grant_type: 'authorization_code',
js_code: res.code,
},
success: (res) => {
console.log(res);
}
});
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
绑定全局变量
在main.js中定义
Vue.config.productionTip = false
Vue.prototype.baseUrl = 'http://192.168.100.8:18090' // 通过prototype定义
App.mpType = 'app'
const app = new Vue({
...App
})
在Vue中使用
this.baseUrl
在js中使用
import Vue from 'vue'
let api = Vue.prototype.baseUrl
微信小程序按需注入
"lazyCodeLoading" : "requiredComponents"
上传代码自动压缩
获取手机号
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
使用Vuex
uniapp内置了Vuex，不需要安装，直接使用即可，在根目录下创建store/index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 相当于data属性
testValue: "测试数据"
},
getters: {
// 计算属性
},
mutations: {
// 同步处理，state中的属性值，只能在这里修改
updateValue(state, value) {
state.testValue = value
}
},
actions: {
// 异步处理
},
modules: {
// 模块
}
})
// 导出
export default store
然后再main.js中绑定
import store from './store/index.js'
const app = new Vue({
store, // 使用store
...App
})
使用方式
js中可直接使用原生方式获取和设置
this.$store.state.testValue
this.$store.commit('updateValue', '我不知道')
但是template中使用需要计算属性才行
computed: {
memberFlag: {
get() {
return this.$store.state.memberFlag
},
set(v) {}
},
memberExpireDate: {
get() {
return this.$store.state.memberExpireDate
},
set(v) {}
},
},
vuex测试{{testValue}}
