小程序Dev！

(默认使用Uni-app+Hbulider开发)

├─ common/ # 公用工具库文件
├─ components/ # uni-app组件目录
│ ├─ comp-a.vue # 可复用的a组件
├─ hybrid/ # 存放本地网页的目录
├─ pages/ # 业务页面文件存放的目录
│ ├─ home/ 
│ │ ├─ index.vue # home页面
│ ├─ list/ 
│ │ ├─ index.vue # list页面
├─ platforms/ # 存放各平台专用页面的目录
├─ static # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─ unpackage/ # 打包目录
├─ wxcomponents/ # 存放小程序组件的目录
├─ App.vue # 应用配置，用来配置App全局样式以及监听
├─ main.js # Vue初始化入口文件
├─ manifest.json # 配置应用名称、appid、logo、版本等打包信息
├─ package.json # 配置页面路由、导航条、选项卡等页面类信息

创建项目后 我们会发现这个
`uni-app`小程序也是单页面的形式。在小程序中，路由是不用自己定义的。`uni-app`路由全部交给框架统一管理，开发者需要在`pages.json`里配置每个路由页面的路径及页面样式，不支持 `Vue Router`，如图，`pages`属性值的数组内容即为路由路径

{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path" : "pages/mine/index",
"style" : {
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#FFFFFF"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#FFFFFF"
},
"tabBar": {
"color": "#BBBBBB",
"selectedColor": "#212121",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/images/tabbar/fans.png",
"selectedIconPath": "static/images/tabbar/fans@selected.png",
"text": "首页"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/images/tabbar/mine.png",
"selectedIconPath": "static/images/tabbar/mine@selected.png",
"text": "个人中心"
}
]
}
}

我们再看到vuex 但是uniapp没有持久化QwQ
我们走第三方罢

npm init -y 
npm install vuex-persistedstate --save

我们再去store.js搞下引入

import Vue from 'vue'
import Vuex from 'vuex'

import home from '@/store/modules/home.js'
import mine from '@/store/modules/mine.js'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const vuexPersisted = new createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key),
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.clearStorageSync(key)
}
})

const store = new Vuex.Store({
modules: {
home,
mine
},
plugins:[vuexPersisted]
})

export default store
main.js也得引用下

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

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
store,
...App
})
app.$mount()

好耶！两个按键已经好了