一裁厅、 什么是uniapp
官方學(xué)習(xí)文檔：https://uniapp.dcloud.net.cn/
搭配
開發(fā)者工具：HBuilderX
HBuilderX下載地址：https://www.dcloud.io/hbuilderx.html
HBuilderX使用文檔：https://hx.dcloud.net.cn/
二蕴茴、 uniapp優(yōu)勢
`uni-app` 是一個(gè)使用 [Vue.js]開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼姐直，可發(fā)布到iOS、Android蒋畜、Web（響應(yīng)式）声畏、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)姻成。
三插龄、我們使用uniapp
<template>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index">
{{item.id}}
</view>
<text @click="gomine('0')">我的</text>
</view>
</template>
<script>
export default {
data() {
return {
list:[],
http:'',
focus:'false',
codetime:90,
inter:'', // 定時(shí)器
codetitle:'獲取驗(yàn)證碼',
}
},
onLoad(option) {
// setTimeout(() => {
// if(option.focus){
// this.focus=option.focus
// }else{
// this.focus=false
// }
// }, 100)
this.focus=option.focus
this.getlist();
},
onShow(){
},
methods: {
// 獲取商戶列表
getlist(){
this.$https.post('/postlist/postlist',{
id: this.http,
}).then(res=>{
// console.log(res,'獲取商戶列表')
if(res.data != null && res.code == 0){
this.list = res.data;
for( var i=0;i<this.list.length;i++){
this.list[i].id = this.list[i].id.slice(0,4); // 字符串截取
this.list[i].idArray = this.list[i].id.split(''); // 字符串分割數(shù)組
this.list[i].id = this.list[i].idArray.join(''); // 數(shù)組分割字符串
}
}
});
},
getCode:(){
var that = this;
that.inter = setInterval(function() {
that.codeshow = false;
that.codetime = this.codetime - 1;
if (that.codetime < 0) {
clearInterval(that.inter);
that.codeshow = true
that.codetime = 90
that.codetitle = '重新發(fā)送'
}
}, 1000);
},
// 跳轉(zhuǎn)
gomine(index){
uni.navigateTo({
url: 'mine'
// url: '/pages/mine/mine'
})
},
}
}
</script>
<style>
.image{
width: 352rpx;
height: 182rpx;
margin: auto;
margin-top: 400rpx;
display: block;
}
</style>
四、uniapp組件
組件模塊地址：https://uniapp.dcloud.net.cn/component/
五科展、uniappAPI
網(wǎng)絡(luò)
1??均牢、uni.request 發(fā)起網(wǎng)絡(luò)請求
路由和頁面跳轉(zhuǎn)
2??、uni.navigateTo 保留當(dāng)前頁面才睹，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
3??徘跪、uni.navigateTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面
4??琅攘、uni.reLaunch 關(guān)閉所有頁面垮庐，打開到應(yīng)用內(nèi)的某個(gè)頁面
5??、uni.switchTab 跳轉(zhuǎn)到 tabBar 頁面坞琴，并關(guān)閉其他所有非 tabBar 頁面
6??哨查、uni.navigateBack 關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面
uni.navigateBack({
delta: 1
});
數(shù)據(jù)存儲(chǔ)
1??剧辐、uni.setStorage 將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中寒亥，會(huì)覆蓋掉原來該 key 對應(yīng)的內(nèi)容邮府，這是一個(gè)異步接口
2??、uni.setStorageSync 將 data 存儲(chǔ)在本地緩存中指定的 key 中溉奕，會(huì)覆蓋掉原來該 key 對應(yīng)的內(nèi)容褂傀，這是一個(gè)同步接口。
3??腐宋、uni.getStorage 從本地緩存中異步獲取指定 key 對應(yīng)的內(nèi)容紊服。
4??、uni.getStorageSync 從本地緩存中同步獲取指定 key 對應(yīng)的內(nèi)容
5??胸竞、uni.removeStorage 從本地緩存中異步移除指定 key
6??欺嗤、uni.removeStorageSync 從本地緩存中同步移除指定 key
uni.setStorageSync('storage_key', 'hello'); // 存
const value = uni.getStorageSync('storage_key'); // 取
uni.removeStorageSync('storage_key'); // 刪
頁面提示框
1??、提示框
uni.showToast({
title: '標(biāo)題',
duration: 2000,
icon:'none'
});
2??卫枝、loading 提示框
uni.showLoading({
title: '加載中'
icon:'none'
});
必須搭配
3??煎饼、uni.hideLoading()
API模塊地址：https://uniapp.dcloud.net.cn/api/
六、插件庫
插件庫地址：https://ext.dcloud.net.cn/
七校赤、uniapp 小程序
文檔地址：https://nativesupport.dcloud.net.cn/README
