uniapp

第一次运行到小程序：
    1再HBuilder中设置微信小程序的路径，
    2在微信小程序中打开安全-》设置-》端口
项目目录：unpackages:打包的文件
    packages.json:页面配置
    manifest.json：打包配置

生命周期函数：
    应用生命周期：定义在app.vue中
        onLaunch：当app初始化完成时触发（全局只触发一次）；
        onShow: 当app显示时，触发；（浏览器从最小化切换到最大化，切换页签时） 
        onHide：当app隐藏时，触发；（浏览器从最大化切换到最小化，切换页签时）
        onError：当app报错时，触发
    页面生命周期：
        onload：监听页面加载，参数为上个页面传递的参数
        onShow:监听页面显示，
        onReady：监听页面初次渲染完成
        onHide：监听页面隐藏
        onUnload:监听页面卸载

        onPullDownRefresh ：监听用户的下拉动作，一般用于下拉刷新  
                uni.startPullDownRefresh()；可以通过按钮来开始下拉刷新，会触发onPullDownRefresh（）中的方法
                uni.stopPullDownRefresh();停止下拉刷新
        onReachBottom:页面滚动到底部的事件，（下拉加载数据）

网络请求：
    uni.request({
                       url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
                       data: {
                             text: 'uni.request'
                       },
           methods: "POST",//默认为GET
                       header: {
                            'custom-header': 'hello' //自定义请求头信息
                       },
                       success: (res) => {
                              console.log(res.data);
                        }
                  });
    注意
    对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
    对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
    对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

数据缓存：
    设置：uni.setStorageSync("userMsg",JSON.stringify(this.apiValue))；
    获取：let res = uni.getStorageSync("userMsg");   console.log(JSON.parse(res));
    移除：uni.removeStorageSync("userMsg");

文件上传：
    uni.chooseImage({
        count: 3, //上传的数量限制，默认为9   h5不生效
        success: (chooseImageRes) => {
            console.log(chooseImageRes)
            this.imgList = chooseImageRes.tempFilePaths; //获取页面所展示的图片集合
            uni.uploadFile({
                url: 'http://39.98.225.237:9119/bcs/userInfo/updateUserInfo', //仅为示例，非真实的接口地址
                //filePath: tempFilePaths[0],
                //name: 'file',
                formData: {
                    token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsZjA5MjMiLCJhdWRpZW5jZSI6IndlYiIsImNyZWF0ZWQiOjE2MDQzODIxMDYxNjgsImF1dGhUb2tlbiI6InR0c2Y6dG9rZW46cGM6MjU2OmRlZjY3MTg2LTkxNjUtNDk5OC1iOTU2LTJlZWFjZGU0ZjVmMiIsImNvbXBhbnkiOjI1NiwiZXhwIjoxNjA0NDY4NTA2LCJ1c2VySWQiOjM2MX0.R85s0MmEd6Qt9DdpkPwtlNvfvaNt5_79-g3XydT5I9uOUTLrCnSxnCTJnoNuetvIx7YBHEaCMJC9FOH5jQdQXw",
                    id: 361,
                    company_id: 256,
                    depart_id: 230,
                    create_user_id: 352,
                    user_name: "lf0923",
                    user_nike_name: "梁飞",
                    user_sex: 1,
                    user_phone: 13612345675,
                    user_email: "213465987465123@qq.com",
                    //这里会有一个默认的参数 file   就是chooseImageRes.tempFiles[0] 这个参数就是向后端传递的参数
                    multfile:chooseImageRes.tempFiles[0] //向后端传递的参数
                },
                success: (uploadFileRes) => {
                    console.log(“接口返回数据”, uploadFileRes.data);
                }
            });
        }
    })

图片预览：
    uni.previewImage({
        current:item,//当前显示的图片
        urls: this.imgList,//图片列表 左右滑动的,
        indicator:"number",//图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。 仅在安卓ios上生效
        loop:true,//是否可循环预览，默认值为 false 仅在安卓ios上生效
        longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
                console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
                console.log(err.errMsg);
            }
        }
    });

条件编译：
    <!-- #ifdef H5  -->
    <view>
        <text>只在H5展示</text>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>
        <text>只在微信小程序中展示</text>
    </view>
    <!-- #endif -->
    注：script中同样支持 只不过是 // #ifdef H5     //#endif
                       style中同样支持 只不过是 /* #ifdef H5*/     /*#endif */

路由跳转：
    <!-- 声明式导航 -->
    <navigator url="../detail/index?id=20&name=wangqi">跳转至详情页面</navigator>
    <navigator url="../detail/index" open-type="redirect">open-type为redirect无返回按钮（将之前页面销毁了）</navigator>
    <navigator url="../my/index" open-type="switchTab">跳转tabbar页面需要设置 open-type</navigator>
    <!-- 编程式导航 -->
    //不卸载之前页面
    uni.navigateTo({
        url:"../detail/index?name=xiaowang&age=100"
    })
    //跳转至tabbar页面
    uni.switchTab({
        url:"../my/index"
    })
    //卸载之前页面
    uni.redirectTo({
        url:"../detail/index"
    })
    接收路由参数：在onload(data){}这个生命周期中，有一个默认的参数，这个默认的参数就是路由传递的值，为一个对象

组件：引入方式同vue，生命周期同vue created，monted等等    
传值：子传父，父传子，同vue，非父子 uni.$emit;    uni.$on


插件：去插件市场下载
          HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册componets。






api请求封装
建立一个公共的js文件
const BASE_URL = "http://39.98.225.237:9119";
//公共接口
export const myRequestApi = (parm) => {
    return new Promise((resolve, reject) => {
        let contentType = "";
        if (parm.method == "POST") {
            if (parm.contentType == 1) {
                contentType = "application/x-www-form-urlencoded"
            } else if (parm.contentType == 2) {
                contentType = "application/json"
            } else {
                contentType = ""
            }
        }
        uni.request({
            url: BASE_URL + parm.url,
            method: parm.method,
            header: {
                'content-type': contentType //自定义请求头信息
            },
            data: parm.data || {},
            success: (res) => {
                if(!res){
                    resolve()
                }
                if (res.data.code == 200) {
                    resolve(res.data)
                } else {
                    return uni.showToast({
                        title: res.data.message,
                        icon:'none',
                        duration: 2000
                    })
                }
            },
            fail: (err) => {
                return uni.showToast({
                    title: res.data.message,
                    icon:'none',
                    duration: 2000
                })
                resolve(err)
            }
        })
    })
}

//文件上传 平台上传图片返回结果是字符串
建立一个公共的js文件 
export const myRequestFile = (parm) => {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: BASE_URL + parm.url,
            formData: parm.data || {},
            success: (res) => {
                let temp = JSON.parse(res.data);
                if(!res){
                    resolve()
                }
                if (temp.code == 200) {
                    resolve(temp)
                } else {
                    return uni.showToast({
                        title: temp.message,
                        icon:'none',
                        duration: 2000
                    })
                }
            },
            fail: (err) => {
                let temp = JSON.parse(res.data);
                return uni.showToast({
                    title: temp.message,
                    icon:'none',
                    duration: 2000
                })
                resolve(err)
            }
        })
    })
}

然后再main.js中引入
    import {
        myRequestApi,
        myRequestFile
    } from "./static/js/api.js"
再
Vue.prototype.$myRequestApi = myRequestApi;
Vue.prototype.$myRequestFile = myRequestFile;
页面中在methods中使用
async getData() {
    let res = await this.$myRequestApi({
        url: "/bcs/userInfo/selectComAndDeptById",
        method: "POST",
        contentType: 1,
        data: {
            token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsZjA5MjMiLCJhdWRpZW5jZSI6IndlYiIsImNyZWF0ZWQiOjE2MDQ0NjE0MTAzNjMsImF1dGhUb2tlbiI6InR0c2Y6dG9rZW46cGM6MjU2OjEwMWI3NTc0LTJmNDEtNGFjYS1hZjVjLWE1MzFkZjQ4MmRkMyIsImNvbXBhbnkiOjI1NiwiZXhwIjoxNjA0NTQ3ODEwLCJ1c2VySWQiOjM2MX0.CsbFgOcSb1bM2VrcN-7lG4qaMOR1IkvRarbGSYx6dVTGpzavAq1odNmjvZu6HlXBEbW2L14sntXqXe2M7awecw",
            id: 360
        }
    })
    if (res) {
        this.apiValue = res.data;
        uni.showToast({
            title: "请求成功",
            icon: 'success',
            duration: 2000
        })
    }
},




打包：
    微信小程序：
    在manifest.json文件中：微信小程序配置--》appId（微信公众平台，开发，开发设置中）-》发布
                在微信公众平台上 点击版本管理 -》提交审核
   H5网页版本：设置完默认应用名称后；运行h5打包就行了