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}
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容