uni-app常用操作

1、跳轉頁面。

uni.navigateTo({
    url: '/pages/login/index?navback=1'
});
//傳遞多個參數例子
uni.navigateTo({
        url: '/mall/shopcart/productDetail?id=' + id + '&merchantId=' + ids.merchantId +
        '&priceStr=' + priceStr + '&name=' + name + '&power=' + this.power +
        "&powerId=" +
        this.powerId + '&picUrl=' + picUrl + '&isMall=' + this.isMall
})

//回傳
let pages = getCurrentPages()
let prevPage = pages[pages.length -2] 
prevPage.$vm.getSelectObjValue(this.ids) 
uni.navigateBack({delta:1})

//獲取返回參數方法
getSelectObjValue(val) {
}

Back(){
    //uni.navigateBack()//默認delta:1
    uni.navigateBack({
        delta:1,//返回層數，2則上上頁
    })
},

2、獲取跳轉參數

onLoad(options) {
   let id = options.id
}

3、頁面聲明周期

onLoad(){
}
onShow(){
}
onHide(){
}
onUnload(){
}

4、獲取當前時間

this.startTime = Date.now();

5、本地數據的存儲

//取出
uni.getStorageSync('userInfo');
//保存
uni.setStorageSync('userInfo', true);
//刪除
uni.removeStorage('userInfo')
//異步獲取結果
uni.getStorage({
    key: 'userMerchant',
    success: function(res) {
    }
})

6、安卓app權限操作
例如獲取定位權限時，彈出請求權限彈框，被拒絕后彈出引導開啟權限彈框。

//可到uni-app官方demo中拷貝該文件
// #ifdef APP-PLUS
import permision from "@/common/permission.js"
// #endif

                    let status = await this.checkPermission();
                    if (status !== 1) {
                        return;
                    }
                    uni.getLocation({
                        type: 'gcj02',
                        success: function(res) {
                            console.log(res.latitude);
                            this.lat = res.latitude
                            this.lng = res.longitude
                            uni.navigateTo({
                                url: '../store/choose-location?pagetype=index&lat=' + this.lat + '&lng=' +
                                    this.lng
                            })
                        }
                    });

            async checkPermission() {
                let status = permision.isIOS ? await permision.requestIOS('location') :
                    await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
            
                if (status === null || status === 1) {
                    status = 1;
                } else if (status === 2) {
                    uni.showModal({
                        content: "系統定位已關閉",
                        confirmText: "確定",
                        showCancel: false,
                        success: function(res) {
                        }
                    })
                } else if (status.code) {
                    uni.showModal({
                        content: status.message
                    })
                } else {
                    uni.showModal({
                        content: "需要定位權限",
                        confirmText: "設置",
                        success: function(res) {
                            if (res.confirm) {
                                permision.gotoAppSetting();
                            }
                        }
                    })
                }
                return status;
            }

在提交應用市場時，對權限檢測很嚴格，uniapp在manifest中可以配置啟動時獲取權限，我們需要關閉。request改為none。


image.png

7、vue動態樣式

<view :class="status == 1?'top':'top1'" @click="show = true">

<style>
   .top{
      xxx
    }
   .top1{
     xxx
   }
</style>

8、uniapp中使用iconfont圖標。
參考：【小程序開發】uniapp引入iconfont圖標及使用方式_uniapp icon-CSDN博客
操作完后需要重啟項目

9、uniapp使用vuex的store
步驟一：在項目添加store文件夾，然后定義index.js文件


image.png
import Vue from 'vue'
import Vuex from 'vuex'
import $mRoutesConfig from '@/config/routes.config.js'
import $mRouter from '@/common/router.js'

const TOKEN = uni.getStorageSync("token") || "";
const OPENID = uni.getStorageSync("openId") || "";
const USER_INFO = uni.getStorageSync("userInfo") || {};
const CUSTOMER_INFO = uni.getStorageSync("customerInfo") || {};
const taskCategory = uni.getStorageSync("taskCategory") || {};
const DIRECTMERCHANT = uni.getStorageSync("directMerchant") || {}
const WXPAYENABLE = uni.getStorageSync("wxPayEnable") || ""

Vue.use(Vuex)
import api from '@/util/api'

const store = new Vuex.Store({
    modules: {},
    plugins: [
        // createPersistedState({
        //  storage: plus.storage
        // })
    ],
    state: {
        lastTime: new Date().getTime(),
        lb: false,
        show: true,
        PK2: 'QUAA4GNADCBiQKBgQCmQ',
        hasLogin: false,
        appAd: 'uni',
        //userInfo: {},
        // 是否強制登錄
        forcedLogin: true,
        // 前端token
        token: TOKEN,
        // 用戶信息 頭像 昵稱
        userInfo: USER_INFO,
        // 用戶的商戶信息
        customerInfo: CUSTOMER_INFO,

        operatingSystem: '',

        requestList: [], // 網絡請求隊列

        goodsCartList: [], // 自營購物車列表
        goodsCartTotal: {}, // 自營購物車總數
        taskCategory: taskCategory, // 任務類目
        directMerchant: DIRECTMERCHANT, //被鎖的人的上級信息
        plantInfo: {}, //工廠商戶信息
        wxPayEnable: WXPAYENABLE,
        // tabbar:TABBARs  ,
        tabbar: [{
                pagePath: "/pages/home/index",
                iconPath: "/static/tabBar/home.png",
                selectedIconPath: "/static/tabBar/home-active.png",
                text: "首頁"
            },
            {
                pagePath: "/pages/sort/index",
                iconPath: "/static/tabBar/category.png",
                selectedIconPath: "/static/tabBar/category-active.png",
                text: "分類"
            },
            {
                pagePath: "/pages/store/index",
                iconPath: "/static/tabBar/shop.png",
                selectedIconPath: "/static/tabBar/shop-active.png",
                text: "門店"
            },
            {
                pagePath: "/customerService/list/list",
                iconPath: "/static/tabBar/cart.png",
                selectedIconPath: "/static/tabBar/cart-active.png",
                text: "購物車"
            },

        ],
        tabbar2: [{
                "pagePath": "/pages/home/index",
                "iconPath": "/static/tabBar/home.png",
                "selectedIconPath": "/static/tabBar/home-active.png",
                "text": "首頁"
            },
            {
                "pagePath": "/pages/sort/index",
                "iconPath": "/static/tabBar/category.png",
                "selectedIconPath": "/static/tabBar/category-active.png",
                "text": "分類"
            },

            {
                "pagePath": "/pages/store/index",
                "iconPath": "/static/tabBar/shop.png",
                "selectedIconPath": "/static/tabBar/shop-active.png",
                "text": "門店"
            },

            {
                "pagePath": "/customerService/list/list",
                "iconPath": "/static/tabBar/news.png",
                "selectedIconPath": "/static/tabBar/news-active.png",
                "text": "消息",
                count: 0,
            },
            {
                "pagePath": "/pages/my/index",
                "iconPath": "/static/tabBar/user.png",
                "selectedIconPath": "/static/tabBar/user-active.png",
                "text": "我的",
            }
        ],
        tabbar3: [{
                "pagePath": "/pages/home/index",
                "iconPath": "/static/tabBar/home.png",
                "selectedIconPath": "/static/tabBar/home-active.png",
                "text": "首頁"
            },
            {
                "pagePath": "/pages/sort/index",
                "iconPath": "/static/tabBar/category.png",
                "selectedIconPath": "/static/tabBar/category-active.png",
                "text": "分類"
            },

            {
                "pagePath": "/customerService/list/list",
                "iconPath": "/static/tabBar/news.png",
                "selectedIconPath": "/static/tabBar/news-active.png",
                "text": "消息",
                count: 0,
            },
            {
                "pagePath": "/pages/my/index",
                "iconPath": "/static/tabBar/user.png",
                "selectedIconPath": "/static/tabBar/user-active.png",
                "text": "我的",
            }
        ]
    },
    getters: {
        // 用戶是否登錄
        hasLogin: state => {
            if (state.token && state.userInfo) {
                return true;
            } else {
                return false
            }
        }
    },
    mutations: {
        lastTimeUpdata: (state, lastTime) => {
            console.log("lastTimeUpdata")
            state.lastTime = lastTime;
        },
        getShow(state, data) {
            state.show = data
        },
        setlb(state, data) {
            state.lb = data
        },
        login(state, provider) {
            state.hasLogin = true;
            state.userInfo = provider;
            uni.setStorage({ //緩存用戶登陸狀態
                key: 'userInfo',
                data: provider
            })
        },
        logout(state) {
            state.hasLogin = false;
            state.userInfo = {};
            uni.removeStorage({
                key: 'userInfo'
            })
        },
        SET_TOKEN(state, token) {
            state.token = token;
            uni.setStorageSync("token", token);
        },
        SET_OPENID(state, openId) {
            state.openId = openId;
            uni.setStorageSync("openId", openId);
        },
        SET_USERINFO(state, userInfo) {
            let data = Object.assign(state.userInfo, userInfo)
            state.userInfo = data;
            uni.setStorageSync("userInfo", data);
        },
        //沒用到,先留著
        SET_PLANTINFO(state, plantInfo) {
            let data = Object.assign(state.plantInfo, plantInfo)
            state.plantInfo = data;
            uni.setStorageSync("plantInfo", data);
        },
        SET_CUSTOMERINFO(state, customerInfo) {
            state.customerInfo = customerInfo;
            uni.setStorageSync("customerInfo", customerInfo);
        },
        SET_LOGOUT(state) {
            state.token = "";
            state.userInfo = {}
            uni.setStorageSync("userInfo", {});
            uni.setStorageSync("token", "");
        },
        SET_APPAD(state, appAd) {
            state.appAd = appAd;
            uni.setStorageSync("appAd", appAd);
        },
        UPDATA_GOODS_CART(state) {
            let mobile = state.userInfo.mobile || ''
            if (mobile) {
                let obj = {
                    mobile
                }
                getWlkIndex(state, obj)
            }
        },
        SET_CART_TOTAL(state, list) {
            state.goodsCartTotal = list;
        },
        SET_GOODS_CART(state, list) {
            state.goodsCartList = list;
        },
        SET_TASK_CATEGORY(state, list) {
            state.taskCategory = list;
            uni.setStorageSync("taskCategory", list);
        },
        SET_MERCHANT(state, list) {
            state.directMerchant = list
            uni.setStorageSync("directMerchant", list);
        }

    },
    actions: {
        // 登錄過期 重新登錄
        reLogin({
            commit
        }, info) {
            commit("SET_TOKEN", "");
            $mRouter.redirectTo({
                route: $mRoutesConfig.login
            });
        }

    }
})

export default store

步驟二：
引入

import {mapState} from 'vuex';

computed: {
    ...mapState(['userInfo','plantInfo']),
    tabbar: function() {
        if (this.isShoppingGuide) {
            return this.$store.state.tabbar
        } else {
              if (this.isNoLogin) {
                return this.$store.state.tabbar3
             } else {
                return this.$store.state.tabbar2
             }

        }
        },
}

this.$store.commit("SET_USERINFO", userInfo || {});

10、全局常量
在main.js文件中

//定義如下
Vue.prototype.img_src = 'https://xxxxx.oss-cn-shenzhen.aliyuncs.com/'
uni.img_src = 'https://xxxx.oss-cn-shenzhen.aliyuncs.com/'

//data域中引入
data() {
    return {img_src: this.img_src}
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容