uniapp settimeout_uniapp 从入门到放弃

6d11be33cc8f6e4e6aafd9a7cc6e704d.gif

最近的任务是做一个混合的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 这里是可视化的

a7e5a91c208110f267854afc578e23ae.png

40eb5fa7dfb8e2d7e31f4cd1eb448ac0.png

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

070562c91a5fa1703cbdeab6db10ed1d.png

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

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也提供了条件编译功能

#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的问题

我还在一边踩坑一边分享

来源掘金:https://juejin.im/post/6844903848411136007

1

END

1

e0e53c343788d57ec32fa2814c14e858.png

长按关注

451cbb4112e567bbd446a5494a99d1fd.png972459a801894db3ee961314a0485c83.gif点分享3e25347cf7d18f780b3b62242a6e87d0.gif点点赞9b2f20aa17c13c39f1530eff70d339e6.gif点在看
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值