uniapp总结

uniapp快速回顾

main.js

appdata.js

vue页面固有方法

应用生命周期

页面常用函数

uniapp其他说明

组件slot的使用

vue页面固有方法

引用组件

<template>

<view>

<!-- 3.使用组件 -->

<uni-rate text="1"></uni-rate>

</view>

</template>

<script>

// 1. 导入组件

import uniRate from '@/components/uni-rate/uni-rate.vue';

export default {

components: { uniRate } // 2. 注册组件

}

</script>

data

props

methods

computed

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

<template>

<view class="empty-content">

<image class="empty-content-image" :src="setSrc" mode="aspectFit"></image>

</view>

</template>

<script>

export default {

props: {

src: {

type: String,

default: 'empty'

},

},

data() {

return {

typeSrc: {

empty: 'data:image/png;base64,...'

},

}

},

computed: {

setSrc() {

return this.typeSrc[this.src];

},

}

}

</script>

watch

uniapp通过watch监听和computed的使用

1. 普通监听一（无法监听到第一次绑定的变化）

当值第一次绑定的时候，watch不会执行监听函数，只有当值改变的时候 才会执行

<input type="text" v-model="length"/>  

//监听  长度length值发生变化时触发

watch: {

    length (newLength, oldLength) {

        console.log(newLength)

    }

}

2. 普通监听二（可以监听到第一次绑定的变化）

如果要让第一次绑定的时候执行监听函数，则需要把 immediate设置为true

<input type="text" v-model="length"/>  

//监听  长度length值发生变化时触发

watch: {

    length: {

        handler (newLength, oldLength) {

            console.log(newLength)

        },

        immediate: true

    }

}

3. 深度监听（可监听对象内属性变化）

如果要监听对象内部属性，需要把 deep设置为true

<input type="text" v-model="students.name" />

data (){

    return {

        students: {name:'小明'}

    }

},

watch: {

    students: {

        handler(newName, oldName) {

            console.log(newName)

        },

        immediate: true,

        deep: true

    }

}

4. 监听多个数据( 通过computed )

computed适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

computed:{

userInfo(){

const { username, password } = this

return { username, password }

},

},

watch:{

  userInfo: function (e) {

  console.log(e); // 如果用户数据改变时打印新数据

},

},

5. computed的介绍与应用

定义：一个计算属性，计算属性可用于快速计算视图（View）中显示的属性

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

// 计算面积

<template>

<view>

<view

长度:<input v-model="length" type="text"></input>

</view>

<view>

宽度:<input v-model="width" type="text"></input>

</view>

<view>

面积:<input v-model="areas" type="text"></input>

</view>

</view>

</template>

<script>

export default {

data() {

return {

length: '',

width: ''

}

},

computed: {

areas: function() {

return this.length * this.width // 未在data里声明，可直接进行双向绑定到 area

}

},

}

</script>

长度和宽度的数据改变，面积就会改变。也就是说使用computed会自动执行计算函数，计算出面积

组件slot的使用

有时我们需要多个插槽, 元素有一个特殊的 attribute：name，语法： ，用来定义额外的插槽

一个不带 name 的 出口会带有隐含的名字“default”

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

v-slot 只能添加在 上 ，绑定在其他元素上用slot=“**”

slot-two组件：

<template>

  <view class="slottwo">

    <view>slottwo</view>

    <slot name="header"></slot>

    <slot></slot>

    <slot name="footer"></slot>

  </view>

</template>

父组件引用slot-two组件：

  <view class="slot-item">

    <slot-two>

      <view>default:没有指定name的默认插槽的内容</view>

      <template v-slot:header>

        <text>header:我是name为header的slot</text>

      </template>

      <text slot="footer">footer:我是name为footer的slot</text>

    </slot-two>

  </view>

main.js

import Vue from 'vue'

import App from './App'  

import VueI18n from 'vue-i18n'

import appdata from './appdata/appdata'

import cuCustom from './colorui/components/cu-custom.vue'

Vue.component('cu-custom',cuCustom) //基本组件添加入

import Net from './Net'  

Vue.prototype.$net = Net; //迁嵌入

Vue.use(VueI18n)

Vue.config.productuinTip = false

var language = "zh_CN";

try {

const res = uni.getSystemInfoSync();

/*

    console.log(res.model);

    console.log(res.pixelRatio);

    console.log(res.windowWidth);

    console.log(res.windowHeight);

    console.log(res.language);

    console.log(res.version);

    console.log(res.platform);

*/

console.log(res.language);

language = res.language;

if(language.indexOf("zh")==0)

{

language = "zh_CN";

}

if(language=="zh_CN")

{

appdata.SetLanguage(false);

}

else{

appdata.SetLanguage(true);

language="en_US";

}

} catch (e) {

// error

language = "zh_CN";

appdata.SetLanguage(false);

}

const i18n = new VueI18n({

locale: language,

messages: {

'en_US': {

lgpack: {

AppName: 'The Moment',

login: 'Sign in',

password: 'password',

account: 'account',

register: 'No account yet? Click registration',

inputusername: 'Input username',

inputpassword: 'Input password',

loginother: 'Third party login',

Post: 'Post',

Map: 'Map',

Profile: 'Profile',

Message: 'Message',

search:'search',

talk:'talk',

km:'km',

year:'years',

month:'months',

day:'days',

hour:'hours',

min:'min',

just:'just',

loading:'loading',

submit:'Submit',

cancel:'Cancel',

inputemail:'Please input email',

email:'email',

code:'code',

inputcode:'input code',

reg:'Register',

getcode:'Click to get the code',

remuser:'remember account and passsword',

regtitle:'Register Account',

sendingcode:'Sending Code',

sendcodeFail:'Send Code Fail',

reging:'Start registration',

regFail:'Register Fail',

logining:'logining',

myimpost:'My Post tasks',

perr:'Parameter error',

agree:'Agree Receipt',

agreeing:'agreeing task ...',

agreeerr:'agree task error',

free:'Free',

consult:'Consult',

posting:'Submitting',

exit:'Logout',

pcenter:'Personal Center',

editself:'Change personal information',

changepwd:'ChangePassWord',

myposts:'My Posts',

comtasks:'Completed Tasks',

currtasks:'Current Tasks',

headpic:'Headpic',

selheadpic:'Select headpic',

nickname:'Nickname',

inputnickname:'Please Input nickname',

realname:'Full name',

inputrealname:'Please Input Full name', 

sign:'Describe',

inputsign:'Please input describe',

sex:'Gender',

inputsex:'Please input gender',

birthday:'Birthday',

inputbirthday:'Please input birthday',

healthcardno:'Health card number',

inputhealthcardno:'Please input health card number',

healthpic:'Health card picture',

inputhealthpic:'Please input health card picture',

idno:'Identity number',

inputidno:'Please input identity number',

idpic:'Identity picture',

inputhealthpic:'Please input identity  picture',

phone:'Phone number',

inputphone:'Please input Phone number',

address:'Address',

inputaddress:'Please input Address',

upfileing:'Uploading pictures',

upfail:'Failed to upload pictures',

editselffail:'Failed to modify personal information',

changepwdtitle:'Change password',

oldpassword:'Original password',

inputoldpassword:'Please input original password',

newpassword:'New password',

inputnewpassword:'Please input new password',

renewpassword:'Confirm password',

inputrenewpassword:'Please enter a new password again',

pwdisnull:'Passwords cannot be empty',

pwdnotsame:'The new password is inconsistent with the confirmation password',

changepwdfail:'Failed to modify password',

edit:'Edit',

editpost:'Editing ...',

editfail:'Editor failure',

delete:'Delete',

end:'End',

commentrecv:'Comment receiver',

commentpost:'Comment poster',

r2pcom:'Receiver Evaluator',

p2rcom:'Sender evaluates the receipt',

deletemyposttitle:'Are you sure you want to delete this publication?',

ok:'OK',

cancel:'Cancel',

title:'Prompt',

editmypost:'Edit one my post',

editmypostfail:'Failed to edit my release',

endmyposttitle:'Are you sure you want to end this publication?',

endmypostfail:'Failed to end my release',

poster:'Publisher',

excutor:'Executor',

sendFail:'Send Fail',

noConn:'Unconnected No Sending',

opengps:'Please open the Location Service and log in again',

historyLodginText:'Click to load the history message',

startgps:'Locating...'

}

},

'zh_CN': {

lgpack: {

AppName: '近邻互助',

login: '登陆',

password: '口令',

account: '账号',

register: '还没有账号？点击注册',

inputusername: '请输入账号',

inputpassword: '请输入口令',

loginother: '第三方登录',

Post: '发布',

Map: '地图',

Profile: '我的',

Message: '消息',

search:'搜索',

talk:'对话',

km:'公里',

year:'年',

month:'月',

day:'日',

hour:'小时',

min:'min',

just:'刚刚',

loading:'加载中',

submit:'提交',

cancel:'取消',

inputemail:'请输出接收验证码email',

email:'邮箱',

code:'验证码',

inputcode:'请输入验证码',

reg:'注册',

getcode:'点击获得验证码',

remuser:'记住账户口令',

regtitle:'注册账户',

sendingcode:'发送验证码',

sendcodeFail:'发送验证码失败',

reging:'开始注册',

regFail:'注册失败',

logining:'开始登陆',

myimpost:'我发布的任务',

perr:'参数错误',

agree:'同意接单',

agreeing:'正同意接单 ...',

agreeerr:'同意接单失败',

free:'免费',

consult:'面议',

posting:'正在提交',

exit:'退出',

pcenter:'个人中心',

editself:'更改个人信息',

changepwd:'修改口令',

myposts:'我的发布',

comtasks:'已完接单任务',

currtasks:'执行中任务',

headpic:'头像',

selheadpic:'上传头像',

nickname:'匿呼',

inputnickname:'请输入匿称',

realname:'姓名',

inputrealname:'请输入姓名', 

sign:'描述',

inputsign:'请输入描述',

sex:'性别',

inputsex:'请输入性别',

birthday:'生日',

inputbirthday:'请收入生日',

healthcardno:'健康卡号',

inputhealthcardno:'请输入健康卡号',

healthpic:'健康卡照片',

inputhealthpic:'上传健康卡照片',

idno:'身份证号',

inputidno:'请输入身份证号',

idpic:'身份证',

inputhealthpic:'上传身份证',

phone:'电话号码',

inputphone:'请输入电话号码',

address:'地址',

inputaddress:'请输入地址',

upfileing:'正上传图片',

upfail:'上传图片失败',

editselffail:'修改个人信息失败',

changepwdtitle:'更改口令',

oldpassword:'旧口令',

inputoldpassword:'请输入旧口令',

newpassword:'新口令',

inputnewpassword:'请输入新口令',

renewpassword:'确认口令',

inputrenewpassword:'请再次输入新口令',

pwdisnull:'口令不能为空',

pwdnotsame:'新口令与确口令不一致',

changepwdfail:'修改口令失败',

edit:'编辑',

editpost:'正在编辑 ...',

editfail:'编辑失败',

delete:'删除',

end:'结束',

commentrecv:'评论接单者',

commentpost:'评论发单者',

r2pcom:'接单者评发单者',

p2rcom:'发单者评接单者',

deletemyposttitle:'确定删除这条发布吗?',

ok:'确定',

cancel:'取消',

title:'提示',

editmypost:'编辑一个我的发布',

editmypostfail:'编辑我的发布信息失败',

endmyposttitle:'确定要结束该条发布吗?',

endmypostfail:'确定该条发布失败',

poster:'发布者',

excutor:'接单者',

sendFail:'发送失败',

noConn:'未连接不能发送',

opengps:'请开启定位服务后再行登录',

historyLodginText:'点击加载历史消息',

startgps:'开始获得位置信息...'

}

}

}

})

Vue.prototype._i18n = i18n;

appdata.language=language;

Vue.prototype.appdata = appdata;

/*页面使用翻译

<view class="grace-label" style="font-size: 14px;">{{i18n.account}}</view>

computed: {

i18n() {

return this.$t('lgpack'); //挂接语言包

}

},

*/

/*

appdata源码

appdata.js

var globalData = {};

var g_wakelock = null;  

//允许程序后台运行，以持续获取GPS位置  

function wakeLock() {  

    //Android  

    debugger  

    var main = plus.android.runtimeMainActivity();  

    var Context = plus.android.importClass("android.content.Context");  

    var PowerManager = plus.android.importClass("android.os.PowerManager");  

    var pm = main.getSystemService(Context.POWER_SERVICE);  

    g_wakelock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "ANY_NAME");  

    g_wakelock.acquire();  

}  

//结束程序后台运行  

function releaseWakeLock () {  

    if(g_wakelock != null && g_wakelock.isHeld()) {  

        g_wakelock.release();  

        g_wakelock = null;  

    }  

}  

/*初始化系统*/

function InitSYS() {

console.log('开始InitSYS');

//globalData.isCN=true;

//globalData.language="zh_CN";

globalData.LGKey = "";

globalData.m_WorkItems = []; //任务

globalData.m_workSYSFuncMAP = new Object();

globalData.m_sharelSYSFuncMAP = new Object();

globalData.talkusername = "";

globalData.indexreflash = false;

globalData.m_UserInfo = null;

globalData.m_GlobalVars = {};

globalData.m_PageShareFuncs = {};

globalData.latlng = {};

globalData.mapok = false;

console.log('Init SYS');

StartWork();

update();

}

function update() {

//#ifdef APP-PLUS

var server = module.exports.Url + "/CoreSYS/update.ajax"; //检查更新地址

console.log("appid:"+plus.runtime.appid+",version:"+plus.runtime.version);

var req = { //升级检测数据

"appid": plus.runtime.appid,

"version": plus.runtime.version

};

var title="更新提示";

if(!isCN())

{

title="update ...";

}

console.log(title);

uni.request({

url: server,

data: req,

success: (res) => {

try {

console.log(JSON.stringify(res.data));

if (res.statusCode == 200 && res.data.status === 1) {

uni.showModal({ //提醒用户更新

title: title,

content: res.data.note,

success: (res) => {

if (res.confirm) {

plus.runtime.openURL(res.data.url);

}

}

})

}

} catch (e) {

console.log(e.toString());

}

}

})

//#endif

}

/*设置全局可监视变量*/

function SetGlobalVar(VarName, Value) {

var m_OneGlobalVar = null;

try {

m_OneGlobalVar = globalData.m_GlobalVars[VarName];

} catch (err) {

m_OneGlobalVar = null;

}

if (m_OneGlobalVar == null || m_OneGlobalVar == undefined) {

m_OneGlobalVar = {};

m_OneGlobalVar.Value = Value;

m_OneGlobalVar.NotifyFuncArray = [];

globalData.m_GlobalVars[VarName] = m_OneGlobalVar;

console.log("设置数据:" + VarName);

} else {

m_OneGlobalVar.Value = Value;

console.log("设置数据:" + VarName);

}

console.log("绑定长度:" + m_OneGlobalVar.NotifyFuncArray.length);

for (var i = 0; i < m_OneGlobalVar.NotifyFuncArray.length; i++) {

m_OneGlobalVar.NotifyFuncArray[i](VarName, Value);

}

}

/*绑定全局可监视变量的通知函数*/

function AttachGlobalVarNotify(VarName, func) {

var m_OneGlobalVar = null;

try {

m_OneGlobalVar = globalData.m_GlobalVars[VarName];

} catch (err) {

m_OneGlobalVar = null;

}

if (m_OneGlobalVar == null || m_OneGlobalVar == undefined) {

m_OneGlobalVar = {};

m_OneGlobalVar.Value = null;

m_OneGlobalVar.NotifyFuncArray = [];

m_OneGlobalVar.NotifyFuncArray.push(func);

globalData.m_GlobalVars[VarName] = m_OneGlobalVar;

console.log("绑定:" + VarName + "函数成功");

} else {

m_OneGlobalVar.NotifyFuncArray.push(func);

console.log("绑定:" + VarName + "函数成功");

}

}

/*取消绑定全局可监视变量的通知函数*/

function DetachGlobalVarNotify(VarName, func) {

var m_OneGlobalVar = null;

try {

m_OneGlobalVar = globalData.m_GlobalVars[VarName];

} catch (err) {

m_OneGlobalVar = null;

}

if (m_OneGlobalVar != null && m_OneGlobalVar != undefined) {

for (var i = 0; i < m_OneGlobalVar.NotifyFuncArray.length; i++) {

if (m_OneGlobalVar.NotifyFuncArray[i] === func) {

m_OneGlobalVar.NotifyFuncArray.splice(i, 1);

break;

}

}

}

}

/*获得全局可监听变量值*/

function GetGlobalVar(VarName) {

var m_OneGlobalVar = null;

try {

m_OneGlobalVar = globalData.m_GlobalVars[VarName];

} catch (err) {

m_OneGlobalVar = null;

}

if (m_OneGlobalVar != null && m_OneGlobalVar != undefined) {

return m_OneGlobalVar.Value;

} else {

return null;

}

}

/*设置页面共享函数*/

function SetPageShareFunc(FName, func) {

globalData.m_PageShareFuncs[FName] = func;

}

/*执行页面共享函数*/

function CallPageShareFunc(FName) {

try {

var args = [];

for (var i = 1; i < arguments.length; i++) {

args.push(arguments[i]);

}

var func = globalData.m_PageShareFuncs[FName];

if (func != null && func != undefined)

return func.apply(func.this, args);

else {

return false;

}

} catch (err) {

console.log("CallPageShareFunc :" + FName + ",err:" + err.toString());

return false;

}

}

/*添加任务函数映射*/

function AddOnWorkFunc(workName, workFunc) {

var m_workSYSFuncMAP = globalData.m_workSYSFuncMAP;

if (workName in m_workSYSFuncMAP) {} else {

m_workSYSFuncMAP[workName] = workFunc;

}

}

/*

执行一个后台函数,workName:任务名,that:调用者对象,data:执行参数,callBack:执行完后的回调,bAsync 是否异步

挂接全局函数

*/

function AddOneWork(workName, that, data, callBack, bAsync) {

var m_OneWorkItem = {};

m_OneWorkItem.workName = workName;

m_OneWorkItem.that = that;

m_OneWorkItem.data = data;

m_OneWorkItem.bAsync = bAsync;

m_OneWorkItem.callBack = callBack;

globalData.m_WorkItems.push(m_OneWorkItem);

}

/*启动后台任务*/

function StartWork() {

setInterval(function() {

//console.log('后端运行');

try {

var m_workItems = globalData.m_WorkItems;

var m_workSYSFuncMAP = globalData.m_workSYSFuncMAP;

if (m_workItems.length > 0) {

var m_OneWorkItem = m_workItems[0];

if (m_OneWorkItem.workName in m_workSYSFuncMAP) {

if (m_OneWorkItem.bAsync) {

m_workSYSFuncMAP[m_OneWorkItem.workName](m_OneWorkItem.data, that, m_OneWorkItem.callBack);

} else {

var m_ReturnOBJ = {};

try {

m_ReturnOBJ = m_workSYSFuncMAP[m_OneWorkItem.workName](m_OneWorkItem.data);

} catch (e) {

m_ReturnOBJ = e;

}

if (m_OneWorkItem.callBack != undefined) {

m_OneWorkItem.callBack(m_OneWorkItem.that, m_ReturnOBJ);

}

}

} else {

if (m_OneWorkItem.callBack != undefined) {

m_OneWorkItem.callBack(m_OneWorkItem.that, "无返回");

}

}

globalData.m_WorkItems.shift();

}

} catch (err) {

console.log(err);

globalData.m_WorkItems.shift();

}

}, 100);

}

function AddShareFunction(funcName, Func) {

var m_sharelSYSFuncMAP = globalData.m_sharelSYSFuncMAP;

if (funcName in m_sharelSYSFuncMAP) {

} else {

m_sharelSYSFuncMAP[funcName] = Func;

}

}

function CallShareFunction(funcName, that, data) {

var m_sharelSYSFuncMAP = globalData.m_sharelSYSFuncMAP;

if (funcName in m_sharelSYSFuncMAP) {

return m_sharelSYSFuncMAP[funcName](that, data);

}

}

function CheckUser(url, backType) {

if (GetLGKey() == "") {

uni.reLaunch({

url: '/pages/login/login/login?url=' + url + "&backType=" + backType

});

return false;

}

return true;

}

function GetLGKey() {

return globalData.LGKey;

}

function SetLGKey(LGKey, UserName) {

globalData.LGKey = LGKey;

globalData.UserName = UserName;

}

function GetUserName() {

return globalData.UserName;

}

function SetClassInfoMAP(nrClassInfoMAP) {

globalData.nrClassInfoMAP = nrClassInfoMAP;

}

function GetClassInfoMAP() {

return globalData.nrClassInfoMAP;

}

function isCN() {

return globalData.isCN;

}

function SetLanguage(isEN) {

globalData.isCN = !isEN;

}

function IsSelf(name) {

if (name.length == globalData.UserName.length && name.toLowerCase() == globalData.UserName.toLowerCase()) {

return true;

}

return false;

}

function SetNowTalkUser(postusername) {

globalData.talkusername = postusername;

}

function GetNowTalkUser() {

return globalData.talkusername;

}

function ClearTalkUser() {

globalData.talkusername = "";

}

function SetReflashIndex() {

globalData.indexreflash = true;

}

function ResetReflashIndex() {

globalData.indexreflash = false;

}

function GetReflashIndex() {

return globalData.indexreflash;

}

function SetUserInfo(m_UserInfo) {

globalData.m_UserInfo = m_UserInfo;

}

function GetUserInfo() {

return globalData.m_UserInfo;

}

function SetLatLng(latlng) {

globalData.latlng = latlng;

}

function GetLatLng() {

return globalData.latlng;

}

function SetMapLoad(mapok) {

globalData.mapok = mapok;

}

function GetMapLoad(mapok) {

return globalData.mapok;

}

module.exports = {

Url:"http://www.1xn1.com:9800",// globalData.Url,

WSUrl:"ws://www.1xn1.com:9800/imnode",// globalData.WSUrl,

UpFileUrl:"http://www.1xn1.com:9800/CoreSYS/IMUpFile_RawJson.ajax",// globalData.UpFileUrl, //"http://www.minicti.com:9800/CoreSYS/IMUpFile_RawJson.ajax",

SetNowTalkUser: SetNowTalkUser,

GetNowTalkUser: GetNowTalkUser,

ClearTalkUser: ClearTalkUser,

GetLGKey: GetLGKey,

SetLGKey: SetLGKey,

GetUserName: GetUserName,

IsSelf: IsSelf,

CheckUser: CheckUser,

InitSYS: InitSYS,

AddOnWorkFunc: AddOnWorkFunc,

AddOneWork: AddOneWork,

StartWork: StartWork,

AddShareFunction: AddShareFunction,

CallShareFunction: CallShareFunction,

SetClassInfoMAP: SetClassInfoMAP,

GetClassInfoMAP: GetClassInfoMAP,

isCN: isCN,

SetLanguage: SetLanguage,

SetReflashIndex: SetReflashIndex,

ResetReflashIndex: ResetReflashIndex,

GetReflashIndex: GetReflashIndex,

SetUserInfo: SetUserInfo,

GetUserInfo: GetUserInfo,

SetGlobalVar: SetGlobalVar, //设置共享变量

AttachGlobalVarNotify: AttachGlobalVarNotify, //监视共享变量

DetachGlobalVarNotify: DetachGlobalVarNotify, //取消监视共享变量

GetGlobalVar: GetGlobalVar, //获得共享变量值

SetPageShareFunc: SetPageShareFunc, //设置页面共享函数

CallPageShareFunc: CallPageShareFunc, //执行页面共享函数

SetLatLng: SetLatLng, //设置经纬度

GetLatLng: GetLatLng, //获得纬度

SetMapLoad: SetMapLoad, //设置地图加载状态

GetMapLoad: GetMapLoad ,//获得地图加载状态

wakeLock:wakeLock,//允许程序后台运行，以持续获取GPS位置

releaseWakeLock:releaseWakeLock //结束程序后台运行

}

*/

/*

再页面可以调用

this.$net.fetch(...);

if (!this.appdata.CheckUser("/pages/index/index/index", "page")) {

return;

}

Net.js典型内容

const host='https://qiafan.applinzi.com/qiafan/public/index.php/api/';

const loginin = "login/in"; //

const fetch = (ret, address, param, method = 'get') => {

}

。。。

export default {

fetch,

       loginin,

*/

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({

    ...App

})

app.$mount()

App.vue应用主页面

<script>

import Vue from 'vue';

export default {

onLaunch: function() {

      }，

}

应用生命周期

uni-app 支持如下应用生命周期函数：

页面生命周期

uni-app 支持如下页面生命周期函数：

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

页面函数

getApp() 函数用于获取当前应用实例，一般用于获取globalData 。

const app=getApp();

console.log(app,globalData)

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

var pages = getCurrentPages();

var page = pages[pages.length - 1];

// #ifdef APP-PLUS

var currentWebview = page.$getAppWebview();

console.log(currentWebview.id);//获得当前webview的id

console.log(currentWebview.isVisible());//查询当前webview是否可见

);

uni.$emit(eventName,OBJECT)

触发全局的自定事件。附加参数都会传给监听器回调。

 uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);    })

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

 uni.$once('update',function(data){        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);    })

uni.$off([eventName, callback])

移除全局自定义事件监听器。

代码示例

$emit、$on、$off常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面

<template>        <view class="content">            <view class="data">                <text>{{val}}</text>            </view>            <button type="primary" @click="comunicationOff">结束监听</button>        </view>    </template>    <script>        export default {            data() {                return {                    val: 0                }            },            onLoad() {                setInterval(()=>{                    uni.$emit('add', {                        data: 2                    })                },1000)                uni.$on('add', this.add)            },            methods: {                comunicationOff() {                    uni.$off('add', this.add)                },                add(e) {                    this.val += e.data                }            }        }    </script>    <style>        .content {            display: flex;            flex-direction: column;            align-items: center;            justify-content: center;        }        .data {            text-align: center;            line-height: 40px;            margin-top: 40px;        }        button {            width: 200px;            margin: 20px 0;        }    </style>

注意事项

• uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
• 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

拦截器

uni.request({    url: 'request/login', //仅为示例，并非真实接口地址。    success: (res) => {        console.log(res.data);        // 打印： {code:1,...}    }});uni.addInterceptor('request', {  invoke(args) {    // request 触发前拼接 url    args.url = 'https://www.example.com/'+args.url  },  success(args) {    // 请求成功后，修改code值为1    args.data.code = 1  },  fail(err) {    console.log('interceptor-fail',err)  },  complete(res) {    console.log('interceptor-complete',res)  }})

uni.removeInterceptor('request')

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

//在起始页面跳转到test.vue页面并传递参数uni.navigateTo({    url: 'test?id=1&name=uniapp'});

// 在test.vue页面接受参数export default {    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数        console.log(option.id); //打印出上个页面传递的参数。        console.log(option.name); //打印出上个页面传递的参数。    }}

// 2.8.9+ 支持 uni.navigateTo({  url: 'pages/test?id=1',  events: {    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据    acceptDataFromOpenedPage: function(data) {      console.log(data)    },    someEvent: function(data) {      console.log(data)    }    ...  },  success: function(res) {    // 通过eventChannel向被打开页面传送数据    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })  } }) // uni.navigateTo 目标页面 pages/test.vue onLoad: function(option) {  console.log(option.query)  const eventChannel = this.getOpenerEventChannel()  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});  eventChannel.emit('someEvent', {data: 'test'});  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据  eventChannel.on('acceptDataFromOpenerPage', function(data) {    console.log(data)  }) }

url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数onLoad: function (option) {    const item = JSON.parse(decodeURIComponent(option.item));}

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({    url: 'test?id=1'});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({    url: 'test?id=1'});

export default {    onLoad: function (option) {        console.log(option.id);    }}

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

示例

pages.json

{  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首页"    },{      "pagePath": "pages/other/other",      "text": "其他"    }]  }}

uni.switchTab({    url: '/pages/index/index'});

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面

uni.navigateTo({    url: 'B?id=1'});// 此处是B页面uni.navigateTo({    url: 'C?id=1'});// 在C页面内 navigateBack，将返回A页面uni.navigateBack({    delta: 2});

EventChannel

2.8.9+ 支持 页面间事件通信通道

方法

EventChannel.emit(string eventName, any args)

触发一个事件

string eventName 事件名称

any args 事件参数

EventChannel.off(string eventName, function fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.on(string eventName, function fn)

持续监听一个事件

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.once(string eventName, function fn)

监听一个事件一次，触发后失效

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

窗口动画

uni.navigateTo({    url: '../test/test',    animationType: 'pop-in',    animationDuration: 200});uni.navigateBack({    delta: 1,    animationType: 'pop-out',    animationDuration: 200});

组件

open-type 有效值

• navigateTo
• navigateBack

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator><navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >

navigator

</navigator>

pages.json

pages.json 中配置的是窗口显示的动画

"style": {    "app-plus": {        "animationType": "fade-in",        "animationDuration": 300    }}

显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

富文本

百度小程序 Editor 富文本编辑器动态库提供了 createEditorContext 的方法来获取。

 onEditorReady() {     this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');   }

editorContext 通过 id 跟一个 <editor> 组件绑定，操作对应的 <editor> 组件。

平台差异说明

百度小程序引入动态库

1. 在项目中引用动态库，在 manifest.json 中增添一项 dynamicLib

    "mp-baidu" : {    "usingComponents" : true,    "appid" : "",    "setting" : {      "urlCheck" : true    },    "dynamicLib": {//引入百度小程序动态库      "editorLib": {        "provider": "swan-editor"      }    }  },

2. 在每个使用到富文本编辑器组件的页面，配置 pages.json 文件如下：

   {    "pages": [        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "uni-app",                "usingSwanComponents": {                    "editor": "dynamicLib://editorLib/editor"                }            }        }    ]}

第三方登录

uni.login({  provider: 'weixin',  success: function (loginRes) {    console.log(loginRes.authResult);    // 获取用户信息    uni.getUserInfo({      provider: 'weixin',      success: function (infoRes) {        console.log('用户昵称为：' + infoRes.userInfo.nickName);      }    });  }});

分享图片

uni.share({    provider: "weixin",    scene: "WXSceneSession",    type: 2,    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",    success: function (res) {        console.log("success:" + JSON.stringify(res));    },    fail: function (err) {        console.log("fail:" + JSON.stringify(err));    }});

分享图文

href、imageUrl 为必选参数，title/summary 二选一，最好将这四个参数都选上。

uni.share({    provider: "weixin",    scene: "WXSceneSession",    type: 0,    href: "http://uniapp.dcloud.io/",    title: "uni-app分享",    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",    success: function (res) {        console.log("success:" + JSON.stringify(res));    },    fail: function (err) {        console.log("fail:" + JSON.stringify(err));    }});

分享到微信朋友圈示例代码

分享文字

uni.share({    provider: "weixin",    scene: "WXSenceTimeline",    type: 1,    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",    success: function (res) {        console.log("success:" + JSON.stringify(res));    },    fail: function (err) {        console.log("fail:" + JSON.stringify(err));    }});

分享图片

uni.share({    provider: "weixin",    scene: "WXSenceTimeline",    type: 2,    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",    success: function (res) {        console.log("success:" + JSON.stringify(res));    },    fail: function (err) {        console.log("fail:" + JSON.stringify(err));    }});

分享图文

href、imageUrl 为必选参数，title、summary 至少有一项。

uni.share({    provider: "weixin",    scene: "WXSenceTimeline",    type: 0,    href: "http://uniapp.dcloud.io/",    title: "uni-app分享",    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",    success: function (res) {        console.log("success:" + JSON.stringify(res));    },    fail: function (err) {        console.log("fail:" + JSON.stringify(err));    }});

App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）

uni.share({    provider: 'weixin',    scene: "WXSceneSession",    type: 5,    imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',    title: '欢迎体验uniapp',    miniProgram: {        id: 'gh_abcdefg',        path: 'pages/index/index',        type: 0,        webUrl: 'http://uniapp.dcloud.io'    },    success: ret => {        console.log(JSON.stringify(ret));    }});

uni.share 在App端各社交平台分享配置说明

• 第一步，打开 manifest.json -> App模块权限配置，勾选 Share(分享)；
• 第二步，按如下文档具体配置微信、微博、QQ的参数。

微信分享

在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈，并填写 appid，如需在iOS平台使用还需要配置通用链接。

uniCloud

在uni-app前端项目中，内置有uniCloud对象，可以在前端访问uniCloud的数据库、云函数、及云存储。

uni_modules

什么是 uni_modules

uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。

插件开发者，可以像开发uni-app项目一样编写一个uni_modules插件，并在HBuilderX中直接上传至插件市场。

插件使用者，可以在插件市场查找符合自己需求的uni_modules插件，使用HBuilderX 3.1.0+直接导入到自己的uni-app项目中。后续还可以在HBuilderX中直接点右键升级插件。

相对于普通的插件，uni_modules插件拥有更强的独立性，拥有独立的目录结构，可以更加方便的发布，更新，卸载（HBuilderX 3.1.0+对uni_modules插件提供了右键菜单，支持发布，更新，安装依赖等）

相对于node_modules（node.js模块），uni_modules的三方依赖安装时默认最新版本，插件均直接安装在uni_modules目录下，不做嵌套，当然，如果开发者希望固定某个版本的依赖，可以将该三方依赖包含到自己的插件包内。

为什么有了node_modules，还需要再发明一个uni_modules的轮子？

1. node_modules 不满足云端一体的需求。uniCloud的云函数、公共模块、schema和前端的各种js_sdk、组件、页面、项目，无法在node_modules模式下有效融合。
2. uni_modules有付费和商业的插件，DCloud插件市场提供了版权保护。而node_modules不支持付费和版权保护。
3. node_modules 是开发者友好而影响终端用户性能的模式。开发者为了省事，层层嵌套node_modules，造成数量惊人的文件数目。uni_modules不支持module嵌套，鼓励开发者优化包体积
4. uni_modules鼓励开发者总是使用最新版。并在HBuilderX中提供了版本内容对比工具
5. uni_modules里也支持放置node_modules，没有强行排斥。

与之前插件市场的普通插件相比，uni_modules有何优势？

1. 支持在HBuilderX里直接发布、更新、删除
2. 支持依赖（在package.json中配置）
3. 插件文件位置统一，不会造成下载一个插件，不知道给工程下多少个目录写入了多少个文件。删除插件时也可以一点删除

目录结构

uni_modules插件如果是项目类型的插件，只需要在项目的根目录下放一个符合uni_modules规范的package.json。

如果是非项目类型的插件，比如组件、js sdk、页面模板、云函数，则需要放置在项目的uni_modules目录下。

此时uni_modules目录下的目录结构和uni-app的项目结构是一致的，如下：

uni_modules                                项目根目录下 └── [plugin_id] // 插件 ID    ├── uniCloud                           插件内的uniCloud内容会被虚拟合并到项目根目录的uniCloud中（注意：插件内的uniCloud目录，没有-aliyun,-tcb后缀）    ├── components                         符合vue组件规范的uni-app组件目录，支持easycom规范    ├── hybrid                             存放本地网页的目录，详见    ├── pages                              业务页面文件存放的目录    ├── static                             存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此    └── wxcomponents                       存放小程序组件的目录，详见    ├── license.md                         插件使用协议说明    ├── package.json                       插件配置，必选(除此之外均可选)
   ├── readme.md                          插件文档    ├── changelog.md                       插件更新日志    ├── menu.json                          如果是uniCloud admin插件，可以通过menu.json注册动态菜单，详见 menu.json 配置    

• 插件目录不支持pages.json、App.vue、main.js、manifest.json、uni.scss文件，如果需要插件使用者修改这些文件内容，请在插件文档(readme.md)中详细说明。
• 在插件内部引用资源、跳转页面时，请尽量使用相对路径。
• 插件内components目录同样支持easycom规范，插件使用者可以直接在项目中使用插件内符合easycom规范的组件，当项目或插件内存在easycom组件冲突，编译时会给予提示，您可以通过修改组件目录及组件文件名称来解决冲突问题。

配置

package.json

package.json在每个uni_modules插件中都必须存在，包含了插件的基本信息。以下是package.json的详细配置说明

{    // 注意，不能直接拷贝本段代码到编辑器中，package.json 目前不支持注释。本段代码加的注释只是用于解释代码。    "id": "作者ID-插件英文名称", // 必填，插件ID，格式为：'作者ID-插件英文名称'，例如：'xx-yy'，其中作者ID和插件名称只能包含英文、数字，作者ID不能使用'DCloud'、'uni'等关键字    "displayName": "插件显示名称", // 必填，用于展示在插件市场的显示名称    "version": "1.0.0", // 必填，插件版本    "description": "插件描述", // 必填，插件描述    "keywords": [], // 必填，插件标签关键词，最多5个    "repository": "github:user/repo", // 仓库地址    "engines": { // HBuilderX/cli 最低兼容版本        "HBuilderX": "^3.1.0"    },    "dcloudext": { // DCloud插件市场配置      "category": ["前端组件", "通用组件"], // 必填， 插件市场分类      "sale": { // 销售 （目前仅限uniCloud类插件）          "regular": { // 普通授权版价格，单位为元，如果为免费插件，设置普通授权版价格为 0 即可。              "price": "0.00"          },          "sourcecode": { // 源码授权版价格，单位为元              "price": "0.00"          }      },      "contact": { // 插件作者 QQ，方便管理员审核时与作者快速沟通。          "qq": ""      },      "declaration": { // 隐私、权限及商业化声明          "ads": "", //  必填，本插件是否包含广告，如包含需详细说明广告表达方式、展示频率，请如实填写，如不包含，可填“无”          "data": "", // 必填，本插件采集的数据、发送的服务器地址、以及数据用途说明，请如实填写，如不采集任何数据，可填写“插件不采集任何数据”，如果使用的三方SDK需要采集数据，可填写“插件使用的 XX SDK会采集数据，详情可参考：https://other-sdk.com/"          "permissions": "" // 必填，本插件需要申请的系统权限列表，请如实填写，如不需要任何权限，可填“无”      },      "npmurl":"" // npm 地址    },    "uni_modules": { // uni_modules配置        "dependencies": [], // 依赖的 uni_modules 插件ID列表        "encrypt": [ // 配置云函数，公共模块，clientDB Action加密            "uniCloud/cloudfunctions/uni-admin/controller/permission.js"        ],        "platforms": { // 平台兼容性：y 表示 Yes，支持；n 表示 No，不支持；u 表示 Unknown，不确定；默认为 u            "cloud": { // 云端平台兼容性                "tcb": "y",                "aliyun": "y"            },            "client": { // 前端平台兼容性                "App": {                    "app-vue": "y",                    "app-nvue": "n"                },                "H5-mobile": {                    "Safari": { // 当需要指定最小版本才支持时，可以配置minVersion                        "minVersion": "14.0.2"                    },                    "Android Browser": "y",                    "微信浏览器(Android)": "u",                    "QQ浏览器(Android)": "u"                },                "H5-pc": {                    "Chrome": "y",                    "IE": "u",                    "Edge": "u",                    "Firefox": "u",                    "Safari": "u"                },                "小程序": {                    "微信": "y",                    "阿里": "y",                    "百度": "y",                    "字节跳动": "y",                    "QQ": "y"                },                "快应用": {                    "华为": "u",                    "联盟": "u"                }            }        }    }}

• 上述配置基于npm package.json规范扩展，故标准的package.json属性也同样支持，比如可以通过files来控制要上传的插件包内容

uni_modules.config.json

uni_modules.config.json在项目根目录，可以配置插件更新后的触发脚本（通常用于执行自定义的自动化任务），插件uniCloud支持的服务空间。以下是uni_modules.config.json的详细配置说明

{    "scripts": {        "postupdate": "node scripts/upgrade.js" // 更新插件后执行该脚本，可从process.env.UNI_MODULES_ID获取当前被更新的插件ID，如果存在多个，以,隔开    },    "uni_modules": {        "uni-id": { // 插件ID            "uniCloud": ["aliyun", "tcb"] // 当项目同时存在aliyun，tcb时可手动指定该插件所属的服务空间        }    }}

• 项目内仅关联了一个服务空间，此时uni_modules插件内的uniCloud相关资源会自动归属至该服务空间，无需在uni_modules.config.json中配置uniCloud所属服务空间
• 当项目内关联了两个服务空间（阿里云和腾讯云同时存在）
• 若未在uni_modules.config.json中配置平台，则上传该插件uniCloud资源时，会提示上传至选择哪个服务空间
• 若已在uni_modules.config.json中配置平台，则上传时以配置为准，自动归属至指定的服务空间

开发 uni_modules 插件

新建uni_modules目录

在uni-app项目根目录下，创建uni_modules目录，在HBuilderX中可以项目右键菜单中点击新建uni_modules目录