最近的任务是做一个混合的app，刚好我想玩一下uni-app怎么样，在考虑用哪个技术的时候，考虑了RN，Taro，uni-app，RN没有踩过坑怕hold不住，Taro很少看到编译成app的案例，而uni-app比较多，就决定是你了，然后...
1.搭建环境
上官网安装一下开发工具
这里送上连接 www.dcloud.io/hbuilderx.h…
然后需要安装微信开发者工具 最好用最新的
如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了
然后用开发工具 创建一个模板
2.使用vuex
uni-app已经内置vuex 不需要再安装了
在根目录下新建store文件 在其目录创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
text: 'demo'
},
mutations: {
SetText(state, v) {
state.text = v
}
},
actions: {
setText: function({commit}, v) {
commit('SetText', v)
}
}
})
export default store 然后在main.js入口文件
import Vue from 'vue'
import App from './App'
// 这里引入store
import store from './store'
// 这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
app.$mount()3.配置
打开manifest.json 这里是可视化的
mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置
如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了
4.HBuilderX 1.9.8的坑
首先是onLoad生命周期 调用路由的api会报错
navigateTo with an already exist webviewId 1 如果出现这个错 解决办法就是延迟
setTimeout(() => {
uni.switchTab({
url: '这里是路径'
})
}, 400)官方说在1.9.9+版本会修复
5.获取节点
支持微信小程序 H5 APP 其他没有测试
uni.createSelectorQuery()
// 官方说自定义组件模式 要这样写
uni.createSelectorQuery().in(this)这里需要注意一点 要在onReady这个生命周期里面才能获取到
6.swiper的高度问题
大家如果写过微信小程序的话都知道swiper是要写一个高度的，而uni-app等于也是一个加强版的小程序，swiper也要写高度，但我们都不太能确定高度，只能用一些办法来确定它的高度
第一种办法就是已知item的高度，在获取数据后，用item的高度*item的数量获得高度
第二种就是用节点获取高度，我自己就用这个办法，亲测app跟微信小程序都ok
// 先在swiper组件写上动态style来获得高度
<swiper :style="{height: `${swiperHeight}px`}">
<swiper-item v-for="(item,index) in tabList" :key="index">
<div :class="columnList[index]"></div>
</swiper-item>
</swiper>
// 这里的class 我一开始是用字符串模板来实现`columnList${index}`
// 跑是能跑起来 但是会报错 忍不住自己就不用字符串了
// 接着使用fun的办法 但是uni-app不支持这种写法
// 后面想着用tabList的长度来初始化一个columnList （这个办法有点笨，如果有人有更好的办法，请告诉我这个菜鸡）
// 书写一个获取节点的方法
get_wxml(className, callback) {
uni.createSelectorQuery().select(className).boundingClientRect(callback).exec()
}
// 在onReady生命周期里面获取高度
onReady() {
this.get_wxml(这里写你要获取的节点，我这里是我定义的columnList[index], (rects) => {
this.swiperHeight = rects.height
})
}7.条件编译
多端开发肯定避免不了存在跨端的差异性，uni-app也提供了条件编译功能
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
写法如下
#ifdef APP-PLUS
需条件编译的代码
#endif
APP-PLUS是指app端的 还有更多端的 我这里提供链接 查询uniapp.dcloud.io/platform
优化建议
建议使用自定义组件模式
每次data改变都会重新渲染视图，一些不是视图的变量，可以考虑定义在data外面
写组件的时候避免多层嵌套，建议3 4层还最佳
建议用vuex来管理数据，如果想要在app更好的性能可以使用nvue来开发
开发体验
uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了
关于app调试的时候没有打印出来，那个时候内心是绝望的，升级到1.9.7后就有了，但也不推荐大家盲目的升级，升级之后总有一些奇奇怪怪的bug，比如最近onload的问题
我还在一边踩坑一边分享，所以这个文章会一直更新
