一、 什么是uniapp

官方学习文档：https://uniapp.dcloud.net.cn/
搭配
开发者工具：HBuilderX   
HBuilderX下载地址：https://www.dcloud.io/hbuilderx.html
HBuilderX使用文档：https://hx.dcloud.net.cn/

二、 uniapp优势

    `uni-app` 是一个使用 [Vue.js]开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

三、我们使用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('');   // 字符串分割数组
                            this.list[i].id = this.list[i].idArray.join('');   // 数组分割字符串
                        }
                    }
                });     
              },
              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 = '重新发送'
                   }
                }, 1000);
              },
              // 跳转
              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

网络

1⃣️、uni.request 发起网络请求

路由和页面跳转

2⃣️、uni.navigateTo 保留当前页面，跳转到应用内的某个页面

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

3⃣️、uni.navigateTo 关闭当前页面，跳转到应用内的某个页面
4⃣️、uni.reLaunch 关闭所有页面，打开到应用内的某个页面
5⃣️、uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
6⃣️、uni.navigateBack 关闭当前页面，返回上一页面或多级页面

uni.navigateBack({
    delta: 1
});

数据存储

1⃣️、uni.setStorage 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
2⃣️、uni.setStorageSync 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
3⃣️、uni.getStorage 从本地缓存中异步获取指定 key 对应的内容。
4⃣️、uni.getStorageSync 从本地缓存中同步获取指定 key 对应的内容
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