uniapp开发小程序

纯当做笔记用的，平台没办法设置仅自己可以见

app页面获取一些小程序的信息，及判断小程序的更新

        onLaunch: function() {
            // 获取 小程序信息并存储
            const accountInfo = uni.getAccountInfoSync();
            this.$store.dispatch('setAccountInfo', accountInfo)
            console.log('onLaunch=setAccountInfo', this.$store.getters.accountInfo);

            // 获取 系统信息斌存储
            const systemInfo = uni.getSystemInfoSync();
            this.$store.dispatch('setSystemInfo', systemInfo)
            console.log('onLaunch=setSystemInfo', this.$store.getters.systemInfo);

        },
        onShow: function() {
            // 检测版本更新，只对正式环境有效
            // #ifdef MP-WEIXIN
            if (wx.canIUse('getUpdateManager')) {
                const updateManager = wx.getUpdateManager()
                updateManager.onCheckForUpdate(function(res) {
                    console.log('onCheckForUpdate====', res)
                    // 请求完新版本信息的回调
                    if (res.hasUpdate) {
                        console.log('res.hasUpdate====')
                        updateManager.onUpdateReady(function() {
                            wx.showModal({
                                title: '更新提示',
                                content: '新版本已经准备好，是否重启应用？',
                                success: function(res) {
                                    console.log('success====', res)
                                    // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
                                    if (res.confirm) {
                                        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                                        updateManager.applyUpdate()
                                    }
                                }
                            })
                        })
                        updateManager.onUpdateFailed(function() {
                            // 新的版本下载失败
                            wx.showModal({
                                title: '已经有新版本了哟~',
                                content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
                            })
                        })
                    }
                })
            }
            // #endif
        },

设置公用请求方法

// 这里的请求方法基于uview来封装的
// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
const install = (Vue, vm) => {
    /**
     *  @description 判断当前环境 处理请求域名
     *     @let appId 小程序appid
     *     @let envVersion 小程序当前环境 develop开发版 trial体验版 release正式版
     *     @let version 小程序线上小程序版本号
     */
    //  
    let {
        appId,
        envVersion,
        version
    } = uni.getAccountInfoSync().miniProgram;
    console.log('appId:>', appId);
    console.log('envVersion:>', envVersion);
    console.log('version:>', version);
    
    let baseUrl = '';
    if (appId === '') {
        switch (envVersion) {
            case 'develop':
                // 开发 
                // baseUrl = '';
                baseUrl = '';
                break;
            case 'trial':
                // 测试
                baseUrl = '';
                break;
        }
    } else if (appId === '') {
        switch (envVersion) {
            case 'develop':
            case 'trial':
                // 预生产
                baseUrl = '';
                break;
            case 'release':
                // 生产环境
                baseUrl = '';
                break;
        }
    }

    // 此为自定义配置参数，具体参数见上方说明
    let setConfig = {
        baseUrl: baseUrl,  //请求地址
        method: 'POST',
        // 设置为json，返回后会对数据进行一次JSON.parse()
        dataType: 'json',
        showLoading: true, // 是否显示请求中的loading
        loadingText: '加载中...', // 请求loading中的文字提示
        loadingTime: 500, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
        originalData: false, // 是否在拦截器中返回服务端的原始数据
        loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
        // 配置请求头信息
        header: {
            'content-type': 'application/json;charset=UTF-8'
        }
    }
    Vue.prototype.$u.http.setConfig(setConfig);

    // 请求拦截部分，每次请求前都会执行
    Vue.prototype.$u.http.interceptor.request = (config) => {
        /* 用户信息 */
        let userInfo = vm.$store.getters.userInfo;
        /* 小程序信息 */
        let accountInfo = vm.$store.getters.accountInfo;
        /* 处理请求头 */
        config.header.Authorization = userInfo?.accessToken ? 'Bearer ' + userInfo?.accessToken : '';
        config.header.userId = userInfo?.userId ? userInfo?.userId : '';
        config.header.language = 'zh';

        // 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
        // 以下接口 不传递userId和Token
        let filterUrl = ['/upms/v1/wechart/user/savebinduser'];
        if (filterUrl.includes(config.url) || config.url.includes(
                '/upms/v1/wechart/user/validatoropenidbyjscode')) {
            delete config.header.Authorization;
            delete config.header.userId;
        }

        console.log('请求前拦截器config内容：', config)
        // 最后需要将config进行return
        return config;
        // 如果return一个false值，则会取消本次请求
        // if(config.url == '/user/rest') return false; // 取消某次请求
    }

    // 响应拦截，每次请求结束都会执行本方法
    Vue.prototype.$u.http.interceptor.response = (res) => {
        // console.log('请求响应后拦截器res内容',res)
        if (res.code === 401) {
            // 401为token失效，这里跳转登录
            vm.$u.toast('验证失败，请重新登录');
            return false;
        }
        return res;

        // if (res.code === 0) {
        //     // res为服务端返回值，可能有code，result等字段
        //     // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
        //     // 如果配置了originalData为true，请留意这里的返回值
        //     return res;
        // } else if (res.code === 201) {
        //     // 假设201为token失效，这里跳转登录
        //     vm.$u.toast('验证失败，请重新登录');
        //     return false;
        // } else {
        //     // 如果返回false，则会调用Promise的reject回调，
        //     // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
        //     return false;
        // }
    }


}

export default {
    install
}

填写api地址

//只支持post、get、put和delete请求
const install = (Vue, vm) => {
    vm.$u.api = {};
    vm.$u.api.getSearch = params => vm.$u.post('', params);
    vm.$u.api.getInfo = params => vm.$u.post('', params);
}
/**/
// 此处使用了传入的params参数，一切自定义即可
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
// vm.$u.api = {getSearch, getInfo};
export default {
    install
}

main.js需要设置请求使用

// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http/interceptor.js'
Vue.use(httpInterceptor, app)
import httpApi from '@/common/http/api.js'
Vue.use(httpApi, app)

pages.json页面填写小程序页脚tab,路由以及分包，公用样式等

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle": "custom"
            }
        },
]
"tabBar": {
        "color": "#999999",
        "selectedColor": "#1168FE",
        "borderStyle": "white",
        "backgroundColor": "#FFFFFF",
        "list": []
}
"preloadRule": { //分包预加载
        "pages/my/my": {
            "network": "all",
            "packages": ["pages/my/subpage"]
        }
}
"subPackages": [ //分包
        {
            "root": "pages/common",
            "pages": [{
                    "path": "search/areaList",
                    "style": {
                        "navigationBarTitleText": "站点列表"
                    }
                },
                {
                    "path": "search/searchEquipent",
                    "style": {
                        "navigationBarTitleText": "搜索"
                    }
                }
            ]
        },
]

小程序启动页

    onLoad() {
            console.log(this.$u.http);
            // 判断微信是否绑定过账号
            uni.login({
                provider: 'weixin',
                success: async (res) => {
                    let {
                        code,
                        msg,
                        data
                    } = await this.$u.api.isBindwx(res.code, {
                        appName: 'ShenBao'
                    });
                    if (code === 0) {
                        this.$store.dispatch('setUserInfo', data);
                        console.log('onLaunch=userInfo', this.$store.getters.userInfo);
                    } else {
                        this.$store.dispatch('logout', data);
                    }
                    uni.switchTab({
                        url:'../home/home'
                    })
                }
            })
            // 分享
            uni.showShareMenu();
        },

uniapp 页面传参

• 跳转页面的时候传参eventChannel.emit

uni.navigateTo({
    url: 'path',
    events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        getEquipment: data => {
            console.log('evnetsget------------', data)
            this.$emit('searchCallBack', data);
        }
    },
    success: res => {
        this.$emit('openSearch');
        console.log('evnetsres------------', res)
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('pageParams', this.params)
    }
})

// 在跳转后的页面通过eventChannel.emit回传

this.eventChannel.emit('getEquipment', item);

• 第二种接收方式，不是在路由跳转处接收，在onLoad接收

onLoad() {
  //uniapp方法 this.getOpenerEventChannel() 用于通讯
  this.eventChannel = this.getOpenerEventChannel();
  this.eventChannel.on('pageParams', (value) => {
    this.data = value.data
  })
},

开发小程序注意点：
1.在微信平台申请小程序、拿到appid开发小程序的时候要填上
2.跟服务端联调接口需要提供appid 及 秘钥Id
3.发布小程序需要去后台设置请求的域名（开发管理-开发设置）