js
// miniprogram/pages/index/add.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
statusBar: app.globalData.statusBarHeight,
customBar: app.globalData.customBar,
custom: app.globalData.custom,
showTopTips: false,
radioItems: [
{name: 'cell standard', value: '0', checked: true},
{name: 'cell standard', value: '1'}
],
checkboxItems: [
{name: 'standard is dealt for u.', value: '0', checked: true},
{name: 'standard is dealicient for u.', value: '1'}
],
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
],
date: "2016-09-01",
time: "12:01",
countryCodes: ["+86", "+80", "+84", "+87"],
countryCodeIndex: 0,
countries: ["中国", "美国", "英国"],
countryIndex: 0,
accounts: ["微信号", "QQ", "Email"],
accountIndex: 0,
isAgree: false,
formData: {
},
rules: [{
name: 'radio',
rules: {required: true, message: '单选列表是必选项'},
}, {
name: 'checkbox',
rules: {required: true, message: '多选列表是必选项'},
}, {
name: 'qq',
rules: {required: true, message: 'qq必填'},
}, {
name: 'mobile',
rules: [{required: true, message: 'mobile必填'}, {mobile: true, message: 'mobile格式不对'}],
}, {
name: 'vcode',
rules: {required: true, message: '验证码必填'},
}, {
name: 'idcard',
rules: {required: true, message: 'idcard必填'},
}]
},
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);
var radioItems = this.data.radioItems;
for (var i = 0, len = radioItems.length; i < len; ++i) {
radioItems[i].checked = radioItems[i].value == e.detail.value;
}
this.setData({
radioItems: radioItems,
[`formData.radio`]: e.detail.value
});
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value);
var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
checkboxItems[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if(checkboxItems[i].value == values[j]){
checkboxItems[i].checked = true;
break;
}
}
}
this.setData({
checkboxItems: checkboxItems,
[`formData.checkbox`]: e.detail.value
});
},
bindDateChange: function (e) {
this.setData({
date: e.detail.value,
[`formData.date`]: e.detail.value
})
},
formInputChange(e) {
const {field} = e.currentTarget.dataset
this.setData({
[`formData.${field}`]: e.detail.value
})
},
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
bindCountryCodeChange: function(e){
console.log('picker country code 发生选择改变，携带值为', e.detail.value);
this.setData({
countryCodeIndex: e.detail.value
})
},
bindCountryChange: function(e) {
console.log('picker country 发生选择改变，携带值为', e.detail.value);
this.setData({
countryIndex: e.detail.value
})
},
bindAccountChange: function(e) {
console.log('picker account 发生选择改变，携带值为', e.detail.value);
this.setData({
accountIndex: e.detail.value
})
},
bindAgreeChange: function (e) {
this.setData({
isAgree: !!e.detail.value.length
});
},
submitForm() {
this.selectComponent('#form').validate((valid, errors) => {
console.log('valid', valid, errors)
if (!valid) {
const firstError = Object.keys(errors)
if (firstError.length) {
this.setData({
error: errors[firstError[0]].message
})
}
} else {
wx.showToast({
title: '校验通过'
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml
<view class='nav' style="height:{{customBar}}px">
<view class="statusBar" style="height: {{statusBar}}px"></view>
<view class="topBar" style="top:{{statusBar}}px; height:{{customBar-statusBar}}px" >
<view class="back" bindtap="navigateBack">
<image src="../../images/back.png" class="topBar_pic" mode="heightFix"></image>
</view>
</view>
</view>
<view class="page" style="top: {{customBar}}px; position: absolute; width: 100%">
<mp-toptips msg="{{error}}" type="error" show="{{true}}" style="z-index:99999;"></mp-toptips>
<mp-form id="form" rules="{{rules}}" models="{{formData}}">
<mp-cells title="单选列表项">
<mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
<mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
<mp-cells title="复选列表项">
<mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
<mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
<mp-cells title="表单" footer="底部说明文字底部说明文字">
<mp-cell prop="qq" title="qq" ext-class="">
<input bindinput="formInputChange" data-field="qq" class="weui-input" placeholder="请输入qq"/>
</mp-cell>
<mp-cell prop="mobile" title="手机号" ext-class=" weui-cell_vcode">
<input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
<view slot="footer" class="weui-vcode-btn">获取验证码</view>
</mp-cell>
<mp-cell prop="date" title="日期" ext-class="">
<picker data-field="date" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</mp-cell>
<mp-cell prop="vcode" title="验证码" ext-class=" weui-cell_vcode">
<input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
<image slot="footer" class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
</mp-cell>
</mp-cells>
<mp-cells title="提交后表单项报错">
<mp-cell show-error prop="idcard" title="卡号" ext-class="">
<input bindinput="formInputChange" data-field="idcard" class="weui-input" placeholder="请输入卡号"/>
</mp-cell>
</mp-cells>
</mp-form>
</view>
明明按照文档来的，就是不显示，不知道什么问题，是不是npm -init 构建别的包以后就有问题的呢。
在其他的工程里，都能显示的。
就这个工程不行。
使用微信开发者工具 Nightly 1.05.2104192
望尽快修复这个bug！
你好，检查 app.wxss 是否自己隐藏了所有组件？
https://developers.weixin.qq.com/s/bZgnGRm971pZ
以上代码片段，复现问题。
求解决！急求！