微信网页之weui——微信样式控件

最新推荐文章于 2025-06-07 09:11:19 发布

原创最新推荐文章于 2025-06-07 09:11:19 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #javascript #前端

Vue 专栏收录该内容

18 篇文章

订阅专栏

文章目录

资源
- - 资源下载[地址](https://download.csdn.net/download/Willow_Spring/72152805)
引入
使用picker
- - 重点是，
alert弹窗
- - 苹果手机样式
  - 安卓样式

今天问卷做完，结果经理说样式要和微信小程序的一样，我用原生的select默认样式和微信的完全不一样，故此采用weui，在用weui之前要导入所需要的文件

资源

资源下载地址

	<!--引入css样式文件-->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/>
		<!--引入zepto,因为在后续的过程中会用到jq，zepto中集成了jq-->
		<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js" type="text/javascript" charset="utf-8"></script>			
		<!--引入微信的两个js-->
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<!--weui.min.js有版本之分，在低版本的js中有些功能不完善，在高版本会支持-->
    	<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    	<!--<script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>-->
    	
    	<!--zepto必须在自己的js代码之前引入-->

引入

在vue用的话import就行
在这里插入图片描述

使用picker

  <div id="showPicker" @click="checkPicker">请选择</div>

  handleWeixin(index) {
                let {
                    questlist
                } = this.msg
                let item = questlist[index]
                let {
                    options
                } = item
                console.log(item);
                console.log(options);
                let myarray = []
                options.forEach((oitem, oindex) => {
                    oitem.checked = false
                    let a = {
                        label: oitem.storeName,
                        value: oindex
                    }
                    myarray.push(a)
                })
                let that = this
                weui.picker(
                    myarray, {
                        onChange: function (result) {
                            console.log("change", result);
                        },
                        onConfirm: function (result) {
                            that.city = options[result[0]].storeName
                            options[result[0]].checked = true
                            that.dateList = options[result[0]].date
                        }
                    }
                )
                return
            },

重点是，

在这里插入图片描述
上面的代码都是我处理的数据，具体格式为
数组便是选择列表的内容
label便是列表条目内容

  weui.picker(
                            [
                                {
                                label: '飞机票',
                                value: 0
                                   },{
                                    label: '火车票',
                                    value: 1
                                }, {
                                    label: '的士票',
                                    value: 2
                                },{
                                    label: '公交票 (disabled)',
                                    disabled: true,
                                    value: 3
                                }, {
                                    label: '其他',
                                    value: 4
                                }
                            ], 
                                {
                                    onChange: function (result) {
                                        console.log(result);
                                    },
                                    onConfirm: function (result) {
                                        console.log(result);
                                    }
                                }
                        );

alert弹窗

weui.alert(`第${item.orderNum}题为必答题哦`)

苹果手机样式

在这里插入图片描述

安卓样式

在这里插入图片描述