1、打开桌面上的“微信Web开发者工具”，如下图所示：
2、弹出扫描登录页面，如下图所示：
3、手机上微信扫描2步骤的二维码，进行登陆，如下图所示：
4、选择“本地小程序项目”，如下图所示：
5、选择“添加项目”，如下图所示：
6、填写新增项目的信息，如下图所示：
7、为index.wxml藜局腑载添加如下图代码：<!--index.wxml--><button class="show-btn&qu泠贾高框ot; bindtap="showDialogBtn">弹窗</button><!--弹窗--><view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view><view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">添加数量</view> <view class="modal-content"> <view class="modal-input"> <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input> </view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view></view>
8、修改样式文件index.wxs衡痕贤伎s，样式代码如下图所示：/**index.wxss**/.show-btn { margin-top: 100rpx; color: #22cc22;}.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff;}.modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 36rpx;}.modal-title { padding-top: 50rpx; font-size: 36rpx; color: #030303; text-align: center;}.modal-content { padding: 50rpx 32rpx;}.modal-input { display: flex; background: #fff; border: 2rpx solid #ddd; border-radius: 4rpx; font-size: 28rpx;}.input { width: 100%; height: 82rpx; font-size: 28rpx; line-height: 28rpx; padding: 0 20rpx; box-sizing: border-box; color: #333;}input-holder { color: #666; font-size: 28rpx;}.modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx;}.btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede;}.btn-confirm { width: 50%; color: #ec5300; text-align: center;}
9、index.js代码如下图所示：//index.js//获取应用实例var app = getApp()Page({ data: { showModal: false, }, onLoad: function () { }, /** * 弹窗 */ showDialogBtn: function () { this.setData({ showModal: true }) }, /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { }, /** * 隐藏模态对话框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 对话框取消按钮点击事件 */ onCancel: function () { this.hideModal(); }, /** * 对话框确认按钮点击事件 */ onConfirm: function () { this.hideModal(); }})
10、运行，可以看到wx.showModal修改样式后的效果，如下图所示：
