uniapp settimeout_uniapp 从入门到放弃

最新推荐文章于 2024-08-11 16:36:14 发布

weixin_39622760

最新推荐文章于 2024-08-11 16:36:14 发布

阅读量1.5k

点赞数

最近的任务是做一个混合的app，刚好我想玩一下uni-app怎么样，在考虑用哪个技术的时候，考虑了RN，Taro，uni-app，RN没有踩过坑怕hold不住，Taro很少看到编译成app的案例，而uni-app比较多，就决定是你了，然后...

01搭建环境上官网安装一下开发工具

这里送上连接： https://www.dcloud.io/hbuilderx.html

然后需要安装微信开发者工具最好用最新的

如果直接写app的话可以安装模拟器我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

然后用开发工具创建一个模板02使用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'// 这里引入storeimport store from './store'// 这里是重要的一步 这里不写 app会找不到storeVue.prototype.$store = storeconst app = new Vue({  store,  ...App})app.$mount()

03配置打开manifest.json 这里是可视化的

mac这边还有一个坑需要配置微信开发者工具的路径打开偏好设置

如果不配置一直会报错如果出现启动不了微信开发者工具可以自己找到编译好的目录自己手动导入就可以了

04HBuilderX 1.9.8的坑

首先是onLoad生命周期调用路由的api会报错

navigateTo with an already exist webviewId 1

如果出现这个错解决办法就是延迟

setTimeout(() => {    uni.switchTab({        url: '这里是路径'    })}, 400)

官方说在1.9.9+版本会修复

05获取节点支持微信小程序 H5 APP 其他没有测试

uni.createSelectorQuery()// 官方说自定义组件模式 要这样写uni.createSelectorQuery().in(this)

这里需要注意一点要在onReady这个生命周期里面才能获取到

06swiper的高度问题大家如果写过微信小程序的话都知道swiper是要写一个高度的，而uni-app等于也是一个加强版的小程序，swiper也要写高度，但我们都不太能确定高度，只能用一些办法来确定它的高度第一种办法就是已知item的高度，在获取数据后，用item的高度*item的数量获得高度第二种就是用节点获取高度，我自己就用这个办法，亲测app跟微信小程序都ok

// 先在swiper组件写上动态style来获得高度"{height: `${swiperHeight}px`}">

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 })}07条件编译多端开发肯定避免不了存在跨端的差异性，uni-app也提供了条件编译功能