uni-app

uni-app

1.搭建环境

上官网安装一下开发工具
然后需要安装微信开发者工具 最好用最新的
如果直接写app的话 可以安装模拟器 如果是mac 再安装Xcode 就可以双端
然后用开发工具 创建一个模板运用了
2.使用vuex

uni-app已经内置vuex 不需要再安装了
在根目录下新建store文件 在其目录创建index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import users from "./modules/users/users.js";

export default new Vuex.Store({
	modules:{
		users
	}
})

然后在main.js入口文件

import Vue from 'vue'
import App from './App'

//  在这里引入store
import store from './store/index.js'

//  这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store=store;

import divberLine from '@/components/divider-line/divider-line.vue';
import indexNav from '@/components/index/indexNav/indexNav.vue';
import titleCard from '@/components/titleCard/titleCard.vue';
import productItem from '@/components/productItem/productItem.vue';
import Price from '@/components/Price/Price.vue';
import productListItem from'./components/productListItem/productListItem.vue'
import Loading from'@/components/Loading/Loading.vue'
import swiperImage from '@/components/index/swiper-image/swiper-image.vue';
Vue.config.productionTip = false



App.mpType = 'app'

// 单个组件祖册方法
Vue.component("swiperImage",swiperImage)
Vue.component("divberLine",divberLine)
Vue.component("indexNav",indexNav)
Vue.component("titleCard",titleCard)
Vue.component("productItem",productItem)
Vue.component("Price",Price)
Vue.component("productListItem",productListItem)
Vue.component("Loading",Loading)


const app = new Vue({
    ...App,
	store
})
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这个生命周期里面才能获取到
优化建议

建议使用自定义组件模式

每次data改变都会重新渲染视图，一些不是视图的变量，可以考虑定义在data外面

写组件的时候避免多层嵌套，建议3 4层还最佳

建议用vuex来管理数据，如果想要在app更好的性能可以使用nvue来开发

开发体验

uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了

关于app调试的时候没有打印出来，那个时候内心是绝望的，升级到1.9.7后就有了，但也不推荐大家盲目的升级，升级之后总有一些奇奇怪怪的bug，比如最近onload的问题