uni-app全局属性和方法
<p>全局变量和全局方法是软件开发中常用的技术点！</p><p>实现方式大致分为：</p>
<p><span style="font-size: 18px; color: rgba(51, 51, 0, 1)">1、vuex实现，值变动灵活</span></p>
<p><span style="font-size: 18px; color: rgba(51, 51, 0, 1)">2、建立js文件，页面内引用</span></p>
<p><span style="font-size: 18px; color: rgba(51, 51, 0, 1)">3、挂载vue实例后使用</span></p>
<p><span style="font-size: 18px; color: rgba(51, 51, 0, 1)">4、小程序中的globalData</span></p>
<p><span style="font-size: 18px; color: rgba(51, 51, 0, 1)">5、本地存储</span></p>
<p>这里简单讲解下uni-app中挂载到vue实例的全局属性和方法：</p>
<h2>在Main.js中创建：</h2>
<div class="cnblogs_code">
<pre>Vue.prototype.$httpUrl = "https://xxx/"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取图片路径</span>
Vue.prototype.getImgSrc = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(src){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> imgServer = "/pages/static/image/"
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #ifdef MP</span>
imgServer = "https://xxx/"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #endif</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> imgServer +<span style="color: rgba(0, 0, 0, 1)"> src ;
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">提示</span>
const tipMsg =(title,icon,time,mask)=><span style="color: rgba(0, 0, 0, 1)">{
title </span>= title == undefined ? "系统繁忙"<span style="color: rgba(0, 0, 0, 1)"> : title;
icon </span>= icon == undefined ? "none"<span style="color: rgba(0, 0, 0, 1)"> : icon;
time </span>= time == undefined ? 1500<span style="color: rgba(0, 0, 0, 1)"> : time;
mask </span>= mask == undefined ? <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> : mask;
uni.showToast({
title:title,
icon:icon,
mask:mask,
duration:time
})
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">验证手机号</span>
const checkPhone = phone=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(!(/^1\d{9}$/<span style="color: rgba(0, 0, 0, 1)">.test(phone))){
uni.showToast({
title:</span>"手机号格式不正确"<span style="color: rgba(0, 0, 0, 1)">,
icon:</span>'none'<span style="color: rgba(0, 0, 0, 1)">
})
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">;
}
Vue.prototype.$uniApi</span>={tipMsg,checkPhone};</pre>
</div>
<h2>在index.vue中使用：</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">onLoad() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> _self = <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">;
console.log(_self.$httpUrl);
console.log(_self.getImgSrc(</span>"home/bg.png"<span style="color: rgba(0, 0, 0, 1)">));
_self.$uniApi.checkPhone(</span>"12345678910"<span style="color: rgba(0, 0, 0, 1)">);
_self.$uniApi.tipMsg(</span>"听说你比我帅"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<p> </p>
<p>uni-app更多全局属性设定参考：https://ask.dcloud.net.cn/article/35021</p>
</div>
<div id="MySignature" role="contentinfo">
有人住高楼，有人处深沟。
有人光万丈，有人一生绣。
时光是匆匆，回首无旧梦。
人生若几何，凡尘事非多。
深情总遗却，妄自也洒脱。<br><br>
来源：https://www.cnblogs.com/nanyang520/p/12066479.html
頁:
[1]