uni-app入门到精通教程

2022-10-26 00:32:21

2024-11-21 04:13:34

页面生命周期

方法	功能
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow	监听页面显示
onReady	监听页面初次渲染完成
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角分享微信小程序
onPageScroll	监听页面滚动
onTabItemTap	当前是 tab 页时，点击 tab 时触发

js 复制代码

<script>
export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            console.log('页面加载')
        },
        onShow() {
            console.log('页面显示')
        },
        onReady(){
            console.log('页面初次显示')
        },
        onHide() {
            console.log('页面隐藏')
        },
        onUnload() {
            console.log('页面卸载')
        },
        onBackPress(){
            console.log('页面返回...')
        },
        onShareAppMessage() {
            console.log('分享!')
        },
        onReachBottom() {
            console.log('下拉加载...')
        },
        onPageScroll(){
            console.log('页面滚动...')
        },
        onPullDownRefresh() {
            console.log('上拉刷新...')
            uni.stopPullDownRefresh();
        },
        
        // #ifdef APP-PLUS
        onNavigationBarButtonTap(){
            
        },
        // #endif
        
        methods: {
            tap(){
                console.log('tap点击!');
            }
        }
    }
</script>

组件的生命周期

方法	功能
beforeCreate	组件初始化，但数据原生观测、自定义观测(event\watcher)没生成之前。未完全创建阶段
created	组件创建后，但还未挂载
onReady	监听页面初次渲染完成
beforeMount	组件渲染后，挂载前。
mounted	组件挂载到页面可用 vm.$el 访问
beforeUpdate	虚拟 DOM 重新渲染和打补丁之前
activated	keep-alive 组件激活时调用
deactivated	keep-alive 组件停用时调用
beforeDestroy	实例销毁之前调用。实例仍然完全可用
destroy	Vue 实例销毁后调用

js 复制代码

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        props:{},
        beforeCreate() {
            console.log('组件初始化,未完全创建阶段')
        },
        created() {
            console.log('组件创建后，但还未挂载')
        },
        beforeMount(){
            console.log('渲染后待挂载')
        },
        mounted() {
            console.log('组件挂载到页面OK,可用 vm.$el 访问')
        },
        beforeUpdate() {
            console.log('再次渲染前')
        },
        updated(){
            console.log('再次渲染后')
        },
        activated() {
            console.log('当前组件被激活：显示')
        },
        deactivated() {
            console.log('当前组件隐藏')
        },
        beforeDestroy(){
            console.log('销毁前')
        },
        destroy() {
            console.log('销毁后')
          
        },
        methods: {
            tap(){
                console.log('tap点击!');
            }
        }
    }
</script>

页面滚动

js 复制代码

uni.pageScrollTo({
	scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
	duration:300  // 滚动动画的时长
})

获取当前路由

js 复制代码

let pages = getCurrentPages(); // 获取栈实例
let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
let currentPage = pages[pages.length - 1]['$page']['fullPath']; //当前页面路径(带参数)
console.log('跳转到定制页面', currentPage);

小程序启用组件按需注入

在manifest.json配置找到最下方的源码视图也可以用编辑器打开找到mp-weixin添加下面代码

json 复制代码

 "lazyCodeLoading": "requiredComponents"

弹框阻止页面滚动

language 复制代码

<!-- page-meta 只能是页面内的第一个节点 -->
 <page-meta :page-style="show ? 'overflow: hidden;' : ''" />

uniapp微信小程序强制更新

原理本地对比网上的版本

js 复制代码

const updateManager = uni.getUpdateManager();

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate);
});

updateManager.onUpdateReady(function (res) {
  uni.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate();
      }
    }
  });

});

updateManager.onUpdateFailed(function (res) {
  // 新的版本下载失败
});

uni-app小程序分包

目录说明

目录	说明
components	公共组件（供主包引用）
page_	后跟拼音的都是分包
分包里的components	单个分包自己的组件目录，分包vue页面的引用只能是在自己page_xxxx分包目录下才可以引用
pages	主包，里面都是启动页面/TabBar 页面

分包步骤

配置manifest.json

json 复制代码

"mp-weixin": {

"optimization":{"subPackages":true}

}

配置pages.json

在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；

注意：主包和分包是不能再同一目录下，在构建uniapp项目时，可以考虑一下目录结构，以便后期进行分包；

language 复制代码

    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle": "custom",
                "navigationBarBackgroundColor": "#ffffff",
                "navigationBarTitleText": "专家库"
            }
        }
    ],

    "subPackages": [
        {
            "root": "pages_my",
            "pages": [
                {
                    "path": "webViewH5/index",
                    "style": {
                        "navigationBarBackgroundColor": "#ffffff"
                    }
                }
            ]
        }
    ],

3.分包预载配置（preloadRule）

配置pages.json

json 复制代码

    "preloadRule": {
        "pages/my/index": {
            "network": "all",
            "packages": ["pages_my"]
        }
    },

小程序分享

language 复制代码

<button class="invite-button" open-type="share" @click="share">
        分享好友
</button>

onShareAppMessage(){
    return{
        title:'邀请好友领取海量现金券!',
        path:'/pages/my/invite/invite',//页面 path ，必须是以 / 开头的完整路径
        imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
        desc:'我正在使用xxxApp，赶紧跟我一起来体验！',
    }
},

公众号

公众号中的分享需要使用微信的JS-SDK,具体文档参考JS-SDK说明文档，需要配置好公众号js域名，可以直接下载js文件引入，也可以通过npm下载npm install weixin-js-sdk --save，公众号的分享比较繁琐，我们可以新建一个js文件封装起来

language 复制代码

import wx from "weixin-js-sdk"

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wexinShare = (data, shareData) => {

    let appId = data.appId;
    let timestamp = data.timestamp;
    let nonceStr = data.nonceStr;
    let signature = data.signature;
    wx.config({//通过config接口注入权限验证配置
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.checkJsApi({
        jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log(res, 'checkJsApi')
        }
    });
    wx.ready(function() {//通过ready接口处理成功验证
        // //分享到朋友圈”及“分享到QQ空间”
        wx.updateTimelineShareData({
            title: shareData.title, // 分享标题
            link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                console.log("分享朋友圈成功返回的信息:", res);
            }
        })

        //“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
            title: shareData.title, // 分享标题
            desc: shareData.desc, // 分享描述
            link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                console.log("分享朋友成功返回的信息:", res);;
            }
        })

    });
    wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('验证失败返回的信息:', res);
    });
}

uni-app跳转另一个微信小程序

language 复制代码

      uni.navigateToMiniProgram({
           appId: '输入appid',
           path: 'pages/index/index',//跳转路径
           extraData: {
                access_token: this.userInfo.access_token
           },

           envVersion: __wxConfig.envVersion
      });

shortLink跳转不需要appId和path

language 复制代码

      uni.navigateToMiniProgram({
           shortLink: '#小程序://众师云模板/klwShek8cc6gEgj',
           extraData: {
                access_token: this.userInfo.access_token
           },

           envVersion: __wxConfig.envVersion
      });

常见问题

子组件使用深度选择器覆盖组件样式,不效

在父组件写深度选择器样式

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论