小程序Dev！ | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第18天 (默认使用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()

好耶！两个按键已经好了 Bye~