小程序开发中如何更换样式?

　　今天小编给大家说说一个有关于微信小程序开发的事情，就是如果更换样式，不少朋友可能在小程序开发的时候，会碰到这个问题，下面小编就来为大家系统的说说这个问题，看看如果去进行更换，有需要学习的朋友可以来看看!

　　打开桌面上的“微信Web开发者工具”：

　　弹出扫描登录页面：

　　手机上微信扫描2步骤的二维码，进行登陆：

　　选择“本地小程序项目”：

　　选择“添加项目”：

　　填写新增项目的信息，如下图所示：

　　为index.wxml添加如下图代

　　/**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;

　　}

　　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修改样式后的效果。

　　以上就是微信小程序开发如何更换样式的教程了，不知道大家明白了没有，其实只需要照着微微风小编做一遍就好了，当然，如果大家在开发的过程当中还有其他的问题，也可以与其他朋友进行交流哦，并且只有共同学习才会一起成长!

　　相关阅读：

　　微信小程序开发工具常见的有哪些?

　　微信小程序开发文档有哪些类型?

　　微信小程序开发无法找到接入点怎么接解决?常见问题分析!