一、 什么是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` 是一個使用 [Vue.js]開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。

三、我們使用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:'', // 定時器
                codetitle:'獲取驗證碼',
            }
        },
        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組件

uniapp組件.png

uniapp組件2??.png

uniapp組件3??.png

組件模塊地址：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)的某個頁面

   uni.navigateTo({
      url: 'test?id=1&name=uniapp'
    });

3??、uni.navigateTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
4??、uni.reLaunch 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面
5??、uni.switchTab 跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
6??、uni.navigateBack 關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面

uni.navigateBack({
    delta: 1
});

數(shù)據(jù)存儲

1??、uni.setStorage 將數(shù)據(jù)存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個異步接口
2??、uni.setStorageSync 將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個同步接口。
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: '標題',
    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