文档官网
https://uniapp.dcloud.net.cn/
微信公众平台
微信开发者工具
uviewui
uview-plus：支持Vue3
ucharts图表
HBuilder开发者中心：管理创建的uniapp应用
夜神模拟器：不用配置就能运行
Wot Design Uni：高颜值、轻量化的uni-app组件库，基于Vue3
项目创建
https://uniapp.dcloud.net.cn/quickstart-hx.html
HBuilder空格
在工具、设置中
HBuilder安装Prettier
点击工具、插件安装、安装新插件、前往插件市场，搜索Prettier，然后在项目根目录下创建.prettierrc.json
{
"printWidth": 300,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"htmlWhitespaceSensitivity": "ignore",
"trailingComma": "none",
"bracketSameLine": true
}uView安装注意事项
注意导入后，根据文档进行配置
uView-plus安装
vue3版本，uview-plus文档地址
在插件市场进行安装：uni-app插件市场
配置main.js，新增两行
import App from './App'
import uviewPlus from '@/uni_modules/uview-plus' // 新增
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus) // 新增
return {
app
}
}
// #endif在uni.scss头部新增一行
@import '@/uni_modules/uview-plus/theme.scss';在App.vue中增加scss属性后新增一行
<style lang="scss">
// 记得给style加scss属性
// 引入样式
@import "@/uni_modules/uview-plus/index.scss";
/*每个页面公共css */
</style>在manifest.json源码视图中新增一行
/* 小程序特有相关 */
"mp-weixin": {
"appid": "wx8a10856c1374442e",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"mergeVirtualHostAttributes": true // 新增
},在pages.json中新增easycom组件模式
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
// 新增
"easycom": {
"autoscan": true,
// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
"custom": {
"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
}
}
}然后重启HBuilderX，重新运行即可生效
运行到开发者工具
需要注意在微信开发者工具中的设置、安全设置中开启服务端口，才能运行，其他的都可以在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": {
"color": "#999999", // 默认颜色
"selectedColor": "#FF0000", // 选中颜色
"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, //返回层数
})
/////////////////////////////////
vue3 setup 跳转带参数写法
uni.navigateTo({
url: '/pages/paiResult/paiResult?id=' + res.data
})
<script setup>
import {
onLoad
} from '@dcloudio/uni-app'
onLoad((option) => {
console.log(option.id)
})
</script>返回兼容编辑
// 返回上一页，兼容编辑页过来的返回，分享过来的返回
function backFun() {
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
if (pages.length > 2 && prevPage && prevPage.route == 'pages/houseAdd/houseAdd') {
uni.navigateBack({ delta: 3 })
} else if (pages.length > 1) {
uni.navigateBack({ delta: 1 })
} else {
uni.reLaunch({ url: '/pages/index/index' })
}
}常见标签
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}}长按事件
@longpress="childPress(familyData.data)"聊天窗口自动滑到底部
https://blog.csdn.net/weixin_48373171/article/details/137604823
onshow和onload
<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
// onLoad 生命周期
onLoad((options) => {
console.log('页面加载完成', options)
})
// onShow 生命周期
onShow(() => {
console.log('页面显示')
})
</script>图片放大查看（预览图片）
previewImage(url) {
uni.previewImage({
urls: [url], // 需要预览的图片链接列表，必须是数组
current: url // 当前显示图片的链接（可选，不填默认显示第一张）
});
}Vue3响应式陷阱
// 获取数据
function getData(id) {
httpUtil('/tbHouse/detail', { id: id }, (res) => {
if (res.code == 200) {
// 错误写法：formData = res.data (破坏了响应式)
// 正确写法：使用 Object.assign 将数据合并进去
Object.assign(formData, res.data)
console.log('页面数据已更新:', formData);
} else {
showToast(res.msg, false)
}
}, (err) => {
console.log('失败', err);
showToast('请求失败', false)
})
}