uniapp备赛

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents": {
            "uni-group": "/uni_modules/uni-group/components/uni-group/uni-group"
        }
    },

plaintextCopy code
import { showToast } from '@/utils/util'
这里的@符号表示src目录，utils表示src目录下的utils文件夹，util表示utils文件夹中的util.js文件，showToast表示util.js中导出的showToast函数。

plaintextCopy code
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
这里的uniNavBar表示导入的组件名称，@符号表示src目录，components表示src目录下的components文件夹，uni-nav-bar表示components文件夹中的uni-nav-bar文件夹，uni-nav-bar.vue表示uni-nav-bar组件的vue文件。

plaintextCopy code
export default { methods: { showToast() { showToast('提示信息') } } }
这里的showToast方法调用了前面导入的showToast函数。

plaintextCopy code
<template> <view> <uni-nav-bar title="标题"></uni-nav-bar> </view> </template> <script> import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue' export default { components: { uniNavBar } } </script>
这里的uni-nav-bar标签调用了前面导入的uniNavBar组件，并设置了title属性。在components中注册了uniNavBar组件后，才能在模板中使用该组件。

<view class="icon" >
        <uni-icons type="weibo" style="font-size:40px;"></uni-icons>
</view>

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的那条数据',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]
123456789101112131415161718

<template>
    <view>
        <swiper :autoplay="false" :circular="false" :duration="500" :indicator-dots="false" @change="swiperChange">
        // 自己补齐swiper-item，官方文档没有，这个是一个滑动一个屏幕
            <swiper-item>
                <image src="/static//img/guide1.webp" class="guide-img" />
            </swiper-item>
            <swiper-item>
                <image src="/static//img/guide2.webp" class="guide-img" />
            </swiper-item>
            <swiper-item>
                <image src="/static//img/guide3.webp" class="guide-img" />
            </swiper-item>
            <swiper-item>
                <image src="/static//img/guide4.webp" class="guide-img" />
            </swiper-item>
            <swiper-item>
                <image src="/static//img/guide5.webp" class="guide-img" mode="aspectFit" />
            </swiper-item>
        </swiper>
        <view class="guide-indicator-wrap">
            <view v-for="(item,index) in 5" :key="index" :class="['guide-indicator',{'guide-indicator-active': index === current}]">                
            </view>
        </view>
</view>
        <view class="network">
            <networkSite></networkSite>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                current:0
            };
        },
        methods:{
            swiperChange(e) {
                console.log(e),
                this.current = e.detail.current;
            }
        }
    }
</script>
<style lang="scss">
    .guide-indicator {
        width: 16rpx;
        height: 16rpx;
        border-radius: 8rpx;
        background-color: #bbb;
        margin-right: 8rpx;
        transition: background-color 0.2s ease-in-out;
    }
    .guide-indicator-active {
        background-color: #007afe;
    }
    .guide-indicator-wrap {
        position: absolute;
        bottom: 20rpx;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<scroll-view scroll-y="true"  scroll-x="true" class="scroll" >
            <view class="group">
                <view class="item">111</view>
                <view class="item">111</view>
                <view class="item">111</view>
                <view class="item">111</view>
                <view class="item">111</view>
            </view>
        </scroll-view>

<template>
    <view class="network">
        <button @click='openSetting'>
            网络设置
        </button>
    </view>
    <view v-if="set">
        <input placeholder="请输入密码"><input>
        <button @click="saveSetting">
            <template>
  <view class="network">
    <button @tap="openSetting ">网络设置</button>
    <view v-if="set">
      <input type="text" v-model="ip" placeholder="请输入IP地址">
      <input type="text" v-model="port" placeholder="请输入端口号">
      <button @tap="saveSetting">保存</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      set: false,
      ip: '',
      port: ''
    }
  },
  methods: {
    openSetting() {
      this.set = true
    },
    saveSetting() {
      // 这里可以将 IP 和端口号保存到本地存储中，供其他组件使用
      localStorage.setItem('ip', this.ip)
      localStorage.setItem('port', this.port)
      this.set = false
      // uni.setStorageSync('ip','this.ip'),
     // uni.setStorageSync('port','this.port')
    }
  }
}
</script>
<style>
    .network{
        margin-top:200rpx ;
    }
</style>

<template>
    <view class="list">
        // autocomplete="off"代表浏览器不自动填充，
        <input type="text" v-model="text" @keydown.enter="handleKeyup" auto-focus="auto-focus" autocomplete="off" style="border: 1px solid red;">
        <ul>
            <li v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
        {{list}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                text: '',
                list: []
            }
        },
        methods: {
            handleKeyup() {
                if (this.text.trim() === '') {
                    return;
                }
                // push是javascript中的方法
                this.list.push(this.text);
                this.text = '';
            }
        }
    }
</script>
<style>
</style>

<navigator url="/pages/com/com" open-type='reLaunch'>跳转</navigator>

uni.navigateTo(){
 url:"",
 success:res=>{
 }
}

@click="clickImg"
methods:{
clickImg(){
uni.showToast(){
title:"发布失败",
icon:'error'
    }
  }
}

uni.showToast({
    title: '标题',
    duration: 2000
});

:value="message" 
双向绑定
v-model  
<input type="text" id="name" v-model="name">

a(){
                uni.showActionSheet({
                // 也可在data中定义arr，在这里写arr，itemList是必须项
                    itemList: ['A', 'B', 'C'],
                    success: function (res) {
                        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                    },
                    fail: function (res) {
                        console.log(res.errMsg);
                    }
                });
            }

<template>
    <view class="list">
        <button @click="getUrl">更新</button>
        <view class="picurl" v-for="(item,index) in data" :key="index">
            <p>{{data[index]}}</p>
            <br><br><br>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                text:'',
                data:[],
                item:''
            }
        },
        methods: {
            getUrl(e){
                console.log(e),
                uni.showLoading({
                    title:"数据加载中..."
                })
                uni.request({
                    // 这个接口num代表获取的joke值
                    url:"https://autumnfish.cn/api/joke/list?num=5",
                    success:res=>{
                        console.log(res),
                        this.text =res.data.data[1],
                        this.data = res.data.data
                    }
                    // 失败是 fail:res=>{}
                })
                uni.hideLoading()
            }
        },
        onLoad() {
            this.getUrl()
        }
    }
</script>
<style>
</style>

<template>
  <div>
    <input type="text" :value="message">
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title">设置step</view>
            <view>
                <slider value="60" @change="sliderChange" step="5" />
            </view>
            // 记不住用这一个
            <view class="uni-title">显示当前value</view>
            <view>
                <slider value="50" @change="sliderChange" show-value />
            </view>
            <view class="uni-title">设置最小/最大值</view>
            <view>
                <slider value="100" @change="sliderChange" min="50" max="200" show-value />
            </view>
            <view class="uni-title">不同颜色和大小的滑块</view>
            <view>
                <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
            </view>
        </view>
    </view>

<view>
            <label class="radio" checked="status">点击选中
                <radio value="r1" /><text></text>
            </label>
</view>

<checkbox-group name="">
                <label>
                    <!-- <checkbox :value="" /><text></text> -->
                    <checkbox value="cb" checked="true"></checkbox>选中
                </label>
                <label>
                     <!-- text可以不加，:value如果绑定的话，需要在data中写上value -->
                    <checkbox value="cb" /><text>未选中</text>
                </label>
    </checkbox-group>

<uni-easyinput type="password" focus placeholder="请输入内容"></uni-easyinput>

json
Copy code
{
  "globalStyle": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    }
  ],
  "subPackages": [
    {
      "root": "uni_modules",
      "pages": [
        {
          "path": "example/pages/demo/demo",
          "style": {
            "navigationBarTitleText": "示例"
          }
        }
      ]
    }
  ]
}
在上面的配置中，我们将 uni_modules 放在了根目录下，同时在 subPackages 中配置了一个示例页面 demo。
2. 然后，在需要使用导航栏的页面中引入 uni_modules 的导航栏模块，例如：
html
Copy code
<template>
  <view>
    <nav-bar title="登录"></nav-bar>
    <view class="form">
      <input type="text" placeholder="请输入用户名" v-model="username" />
      <input type="password" placeholder="请输入密码" v-model="password" />
      <button type="primary" @tap="login">登录</button>
    </view>
  </view>
</template>
<script>
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
export default {
  components: {
    navBar: uniNavBar
  },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 用户登录逻辑
    }
  }
}
</script>
在上面的代码中，我们首先将 uni_modules 的导航栏模块引入到当前页面中，然后在页面中使用 nav-bar 标签来显示导航栏，并设置对应的标题。
最后，以用户登录页为例，可以按照以下步骤编写：
创建一个 login 页面，例如：
html
Copy code
<template>
  <view>
    <nav-bar title="登录"></nav-bar>
    <view class="form">
      <input type="text" placeholder="请输入用户名" v-model="username" />
      <input type="password" placeholder="请输入密码" v-model="password" />
      <button type="primary" @tap="login">登录</button>
    </view>
  </view>
</template>
<script>
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
export default {
  components: {
    navBar: uniNavBar
  },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 用户登录逻辑
    }
  }
}
</script>
在上面的代码中，我们使用了 uni_modules 的导航栏模块来显示页面标题，并编写了一个简单的用户登录表单。
2. 在 pages.json 中配置 login 页面，例如：
json
Copy code
{
  "globalStyle": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    }
  ],
  "subPackages": [
    {
      "root": "uni_modules",
      "pages": [
        {
          "path": "example/pages/demo/demo",
          "style": {
            "navigationBarTitleText": "示例"
          }
        }
      ]
    }
  ]
}
在上面的代码中，我们将 login 页面添加到了 pages 中，并配置了对应的导航栏标题。
3. 最后，在 main.js 中注册 uni_modules，例如：
javascript
Copy code
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 注册 uni_modules
import '@/uni_modules/uni-app-plus/global'
Vue.use(global)
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
在上面的代码中，我们使用 Vue.use(global) 来注册 uni_modules，并在 App 中使用 global，以便在全局范围内使用 uni_modules 提供的功能。

uni-easyinput
<view class="test1">
            <uni-easyinput type="text" placeholder="请输入账号"></uni-easyinput>
            <uni-easyinput type="password" placeholder="请输入密码">请输入密码</uni-easyinput>
            <common></common>
</view>