微信小程序转uni-app之基础语法(组件)

参考：从其他项目转uniapp

1. 视图容器

1.1 view

(1)eg1

<view class="artList">
    <block v-for="(item,index) in artList" :key="index">
        <view class="item" v-if="item.type == 'image'">
            <image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg"/>
        </view>
        <view class="item" v-if="item.type=='text'">
            <textarea :value="item.content" placeholder="" v-model="artList[index].content"></textarea>
            <view :data-index="index" class="deleteText" @tap="deleteText">删除</view>
        </view>
    </block>
</view>

(2)eg2

<!-- 提交按钮 -->
<view class="submitNow" v-if="artList.length > 0" @tap="submitNow">编辑文章</view>

(3)eg3

<view style="height:50upx;"></view>

(4)eg4

<!-- 文章内容区 -->
        <view class="grace-news-list">
            <block v-for="(item,index) in artList" :key="index">
                <!-- 一张图 -->
                <navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-img-big">
                            <image :src="item.art_content[0]" mode="widthFix"></image>
                        </view>
                    </view>
                </navigator>
                <!-- 三张图 -->
                <navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-imgs">
                            <view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
                        </view>
                    </view>
                </navigator>
            </block>
        </view>

(5)eg5

<view class='item' v-for="(item,index) in orderList" :key="key" v-for-item="item" v-for-index="index" @tap='bindViewDetail' data-machine-sn="item.sn">
    <icon class='iconfont uc-liebiao'></icon>
    <view class='item-name'>
        <view class='machine-name'>{{item.name}}</view>
        <view class='machine-sn'>{{item.sn}}</view>
    </view>
    <view class='item-num'>{{item.number}}</view>
</view>

改为:

<view class='item' v-for="(item,index) in orderList" :key="key" @tap='bindViewDetail' :data-machine-sn="item.sn">
    <icon class='iconfont uc-liebiao'></icon>
    <view class='item-name'>
        <view class='machine-name'>{{item.name}}</view>
        <view class='machine-sn'>{{item.sn}}</view>
    </view>
        <view class='item-num'>{{item.number}}</view>
</view>

(6)eg6

<view class="btn-view">
  <view class="btn-view-con" wx:for="{{btn_arr}}" wx:key="{{index}}" wx:if="{{userInfo.is_root=='1'?true:index=='1'?false:true}}">
    <view class="circle_view_con">
      <view class="circle_view" style="width:{{windowWidth*0.5/3}}px;height:{{windowWidth*0.5/3}}px;border-radius:50%;margin:{{windowWidth*0.25/3-2}}px;margin-bottom:{{windowWidth*0.1/3}}px;"  bindtap="{{item.bindthing}}" >
        <image src="{{item.img_src}}"></image>
      </view>
    </view>
    <text>{{item.text}}</text>
  </view>
</view>

this.setData({
      btn_arr: [{
        bindthing: "switchTo",
        img_src: "/images/my/fengrenji.png",
        text: this.data.T_D.machine
      }, {
        bindthing: "navigatorToStaffPage",
        img_src: "/images/my/users.png",
        text: this.data.T_D.staff
      }, {
        bindthing: "",
        img_src: "/images/my/jk_service.png",
        text: this.data.T_D.service
      }]
    });

switchTo:function(){
    wx.switchTab({
      url: '../machine/index' 
    }) 
  },
  navigatorToStaffPage: function () {
    wx.navigateTo({
      url: "../employee/index"
    })
  },

改为:

<template>
    <view>
<view class="btn-view">
            <view class="btn-view-con" v-for="(item,index) in btn_arr" :key="index" v-if="userInfo.is_root == 1 ? true : index == '1' ? false : true">
                <view class="circle_view_con">
                    <view class="circle_view" :style="{'width':(windowWidth*0.5/3)+'px','height': (windowWidth*0.5/3)+'px','margin':(windowWidth*0.25/3-2)+'px','margin-bpttom': (windowWidth*0.1/3)+'px'}" @tap="routingJump(index)">
                        <image :src="item.img_src"></image>
                    </view>
                </view>
                <text>{{item.text}}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
                    btn_arr : [{
                //bindthing : "switchTo",
                img_src : "/static/my/fengrenji.png",
                text : "text_machine"
            },
            {
                //bindthing : "navigatorToStaffPage",
                img_src : "/static/my/users.png",
                text : "text_staff"
            },
            {
                //bindthing : "",
                img_src : "/static/my/jk_service.png",
                text : "text_service"
            }]
                };
    },
  methods: {
    routingJump:function(index){
            if (index == "0") {
                console.log("界面跳转至机器主页");
                uni.switchTab({
                    url:'/pages/machine/machine'//机器主页
                })
            } else if (index == "1") {
                console.log("界面跳转至员工界面");
                uni.navigateTo({
                    url:'/pages/employee/employee'//员工界面
                })
            }
            
        },
  }
}
</script>

1.2 scroll-view

(1)eg1

<!-- 通过点击方式(选项卡的方式代码负责且应用卡)切换分类(高效简单)  掌握css动态样式追加小技巧 -->
<view class="grace-header-cate">
    <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
        <view v-for="(cate,index) in categories" :key="index" :data-cateid="cate.cateId" :data-index="index" 
            :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']" @tap="tabChange">{{cate.name}}
        </view>
    </scroll-view>
</view>

2. 基础内容

2.1 icon

请参考uni-app组件使用注意中的icon的使用说明部分。

2.2 text

3. 表单组件

3.1 button

<button type="primary" form-type="submit">添加</button>

3.3 form

(1)eg1

<!-- 输入区 -->
<form @submit="submit">
    <view class="inputArea">
        <view class="addImg" @tap="addImg">+图片</view>
            <view class="addText">
                <textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="请输入文本"></textarea>
                <button type="primary" form-type="submit">添加</button>
            </view>
    </view>
</form>

3.4 input

  • value :输入框的初始内容
  • placeholder :输入框为空时占位符(引用国际化文本问题)
  • name : 该属性的作用,uni-app官网无该属性
  • v-model :动态绑定数据
  • @input:当键盘输入时，触发input事件，event.detail = {value}
  • @blur:输入框失去焦点时触发，event.detail = {value: value}
    (1)eg1
<input type="text" v-model="title" placeholder="请输入标题"/>

(2)eg2

<input type="text" class="weui-search-bar__input" :placeholder="T_D.keyword" placeholder-style="color:#e2e2e2" v-model="keyword"/>

(3)eg3

<input type="text" class="weui-search-bar__input" :placeholder="T_D.keyword" v-model="keyword" @blur="inputBlur" @input="inputTyping" />
<view class="weui-icon-clear" v-if="keyword.length > 0" @tap="clearInput">
    <icon type="clear" size="14"></icon>
</view>

(4)eg4
小程序:

<view class="weui-cell__bd">
     <input class="weui-input" type="text" placeholder="{{T_D.pleaseEnterGroupName}}" name="name" value="{{name}}">{{name}}</input>
 </view>

修改语法:

<view class="weui-cell__bd">
    <input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" :value="name">{{name}}</input>
</view>

备注:input 为单标签,值只能写在里面.继续修改:

<view class="weui-cell__bd">
    <input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" :value="name"></input>
</view>

双向绑定:v-model和:value的效果一致.

<view class="weui-cell__bd">
    <input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" v-model="name"></input>
</view>

3.6 picker

  • mode :
  • :range :mode为 selector 或 multiSelector 时，range 有效
  • :value :value 的值表示选择了 range 中的第几个（下标从 0 开始）
  • @change :value 改变时触发 change 事件，event.detail = {value: value}
  • :range-key :当 range 是一个 Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
    (1)eg1
<picker @change="bindPickerChange" :value="index" :range="array">
        <view class="uni-input">{{array[index]}}</view>
</picker>

(2)eg2

<!-- 选择分类 -->
<view class="art-cate">
    <view>文章分类</view>
    <view class="">
        <picker mode="selector" :range="caties" @change="cateChange">
            <view>{{caties[currentCateIndex]}}</view>
        </picker>
    </view>
</view>

3.6 picker-view

(1)eg1

<modal title="{{T_D.pleaseChoosePosition}}" hidden="{{modalHidden}}" confirm-text="{{T_D.confirm}}" cancel-text="{{T_D.cancel}}" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
       <picker-view indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" range="{{positionArray}}" value="{{value}}" bindchange="bindChange">
              <picker-view-column>
                      <view wx:for="{{positionArray}}" wx:key="{{item.id}}" style="line-height: 50px">{{item.text}}</view>
              </picker-view-column>
      </picker-view>
</modal>

改为:

<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
    <picker-view  indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
        <picker-view-column>
            <view v-for="(item,index) in positionArray" :key="item.id" style="line-height: 50px">{{item.text}}</view>
        </picker-view-column>
    </picker-view>
</modal>

备注:语法修改完成后,运行时列表内容不显示,只有一个空的列表架子.
modify1:

<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
    <picker-view  indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
        <picker-view-column>
            <view class="item" v-for="(item,index) in positionArray" :key="item.id">{{item.text}}</view>
        </picker-view-column>
    </picker-view>
</modal>

.item{
    line-height: 50px;
    height:50px !important;
}

备注:style提取出来后,列表内容成功显示,但change事件异常,列表无法正常滑动.
modify2:

<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
    <picker-view v-if="!modalHidden" indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
        <picker-view-column>
            <view class="item" v-for="(item,index) in positionArray" :key="item.id" style="line-height: 50px">{{item.text}}</view>
        </picker-view-column>
    </picker-view>
</modal>

注意:添加 v-if="!modalHidden" 所有问题都解决.

3.11 textarea

<textarea :value="item.content" placeholder="" v-model="artList[index].content"></textarea>

<textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="请输入文本"></textarea>

4. 导航-navigator

(1)eg1

<!-- 文章内容区 -->
        <view class="grace-news-list">
            <block v-for="(item,index) in artList" :key="index">
                <!-- 一张图 -->
                <navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-img-big">
                            <image :src="item.art_content[0]" mode="widthFix"></image>
                        </view>
                    </view>
                </navigator>
                <!-- 三张图 -->
                <navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-imgs">
                            <view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
                        </view>
                    </view>
                </navigator>
            </block>
        </view>

5. 媒体组件

5.3 image

  • src:图片资源地址
  • mode:图片裁剪、缩放的模式
  • lazy-load:图片懒加载
    (1)eg1
<image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg"/>

(2)eg2

<!-- 文章内容区 -->
        <view class="grace-news-list">
            <block v-for="(item,index) in artList" :key="index">
                <!-- 一张图 -->
                <navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-img-big">
                            <image :src="item.art_content[0]" mode="widthFix"></image>
                        </view>
                    </view>
                </navigator>
                <!-- 三张图 -->
                <navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
                    <view class="grace-news-list-img-news">
                        <view class="grace-news-list-title-main">{{item.art_title}}</view>
                        <view class="grace-news-list-imgs">
                            <view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
                            <view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
                        </view>
                    </view>
                </navigator>
            </block>
        </view>

6. 进度条-progress

<view class="weui-progress">
       <view class="weui-progress__bar">
              <progress percent="{{item.use_time}}" stroke-width="3" />
        </view>
 </view>

修改语法:

<view class="weui-progress">
    <view class="weui-progress__bar">
        <progress :percent="item.use_time" stroke-width="3" />
    </view>
</view>

其他

注意事项.PNG

可参考小程序转uni-app语法差异

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容