最近的任务是做一个混合的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.使用vuexuni-app已经内置vuex 不需要再安装了 在根目录下新建store文件 在其目录创建index.jsimport 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.KaTeX parse error: Expected '}', got 'EOF' at end of input: …yle="{height: `{swiperHeight}px`}">
// 这里的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需条件编译的代码#endifAPP-PLUS是指app端的 还有更多端的 我这里提供链接 查询uniapp.dcloud.io/platform优化建议建议使用自定义组件模式每次data改变都会重新渲染视图,一些不是视图的变量,可以考虑定义在data外面写组件的时候避免多层嵌套,建议3 4层还最佳建议用vuex来管理数据,如果想要在app更好的性能可以使用nvue来开发开发体验uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了关于app调试的时候没有打印出来,那个时候内心是绝望的,升级到1.9.7后就有了,但也不推荐大家盲目的升级,升级之后总有一些奇奇怪怪的bug,比如最近onload的问题我还在一边踩坑一边分享,所以这个文章会一直更新
作者:Herren
链接:https://juejin.cn/post/6844903848411136007
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。