前端

快捷键

代码规范快捷键：shift+alt+F

导航栏自定义设置

{"pages": ["index/index","index/index2"],"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "index/index","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "组件"},{"pagePath": "index/index2","iconPath": "image/icon_API.png","selectedIconPath": "image/icon_API_HL.png","text": "接口"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}

以上包含了点击和未点击显示的不同的颜色和图片、顶部样式

去除按钮button边框

.right button{margin: 0;padding: 0;background-color: inherit;position: static;
}

上述代码在跳转页面获取id时会出现问题，点击整个页面的任何地方都会跳转，改为以下形式：

.right button{background-color: inherit;
}
button::after{ border: none; }

图片的添加

1、在.wxml中添加代码：

    <view class="section__ctn"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image></view>

2、在.js文件中添加代码：
自己新建文件夹resources添加图片

    data: {src: '../resources/cat.jpg'},

Q：图片不显示，只显示灰色方框
A：
(1)<image src='/images/logo.jpg'></image> ×
(2)勾选设置中的不校验域名 ×
显示问题：

[渲染层网络层错误] Failed to load local image resource /pages/resources/plane1.jpg
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)
(env: Windows,mp,1.05.2112302; lib: 2.19.4)
解决方法：
1、修改设置-本地设置-调试基础库（未解决）
2、加上wx:if="{undefined{arr.length>0}}“或者wx:if=”{undefined{****}}"
拖延一下加载图片的时间（未解决）
3、图片路径错误，修改路径！

*src的使用：
同文件夹中：eg: "\plane1.jpg"
上一级目录中：planesrc: '../plane1.jpg'
上一级的上一级目录中：planesrc: "../../resources/plane1.jpg"

图片和文字对齐

在图片与文字整体的view中添加css：

align-items:center;

picker等组件中的图片和文字对齐，需要再将其加入view中，然后再此view下设置css：

  display:flex;text-align: center;align-items:center;

换行符

text标签中加入\n
<text>***（文字）\n</text>

\n

文字超出自动换行：

text-overflow:ellipsis;
word-wrap:break-word;

空格符

空格：\t

多个空格：

<text space="ensp">哈哈啊 哈哈哈（空格是中文字符一半大小）</text>
<text space="emsp">哈哈啊 哈哈哈（空格是中文字符大小）</text> 
<text space="nbsp">哈哈啊 哈哈哈（空格根据字体设置）</text>
<text decode="{{true}}">哈哈&ensp;啊&ensp;&ensp;&ensp;哈哈哈（空格是中文字符一半大小）</text>
<text decode="{{true}}">哈哈&emsp;啊&emsp;&emsp;&emsp;哈哈哈（空格是中文字符大小）</text>
<text decode="{{true}}">哈哈&nbsp;啊&nbsp;&nbsp;&nbsp;哈哈哈（空格根据字体设置）</text>

view布局

注：小程序中根元素为page不是body
横向布局：flex-direction:row;
纵向布局：flex-direction:column;

row：从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴

让多个view处在同一行：display: flex;
设置元素在横向上的布局方向：设置 justify-content 属性

1、flex-start：主轴起点对齐(默认值)
2、flex-end：主轴结束点对齐
3、center：在主轴中居中对齐
4、space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
5、space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

设置元素在纵向上的布局方向，设置 align-items 属性

1、stretch 填充整个容器(默认值)
2、flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
3、flex-end 侧轴的终点对齐
4、center 在侧轴中居中对齐
5、baseline 以子元素的第一行文字对齐

子 View 还有个属性 align-self，可覆盖父元素的 align-items 属性，有6个值可选：

auto | flex-start | flex-end | center | baseline | stretch （auto
为继承父元素 align-items 属性，其他和 align-items 一致）

flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：

nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行，第一行在最下面

子 View 的order 属性可控制子元素的排列顺序，默认0，order:-1; 可以排在前面。

设置元素高度为页面整个屏幕高 page{height:100vh;} 。设置高度100%没有效果
vh，是css相对视口高度。1vh=1%*视口高度

view居中显示：margin：0 auto；orflex布局里的justify-content: center;
view文字居右：
1、row-reverse
2、text-align:right;
3、flex-end

边框（view&border）

边框：border: 2px solid #ac9a81;
阴影：box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.15);（x、y坐标、模糊程度、颜色）
圆角（内凹圆角反向圆角)：border-radius: 10rpx;
左半边为圆角border-bottom-left-radius: 10px; border-top-left-radius: 10px;

Text

字体居中：
在字体view下设置：

    display:flex;align-items:center; 垂直居中justify-content:center; 水平居中

文字大小&颜色

  font-size: 20px;color: rgb(54, 45, 45);

列表

wxml文件中：

<view wx:for="{{array}}">{{index}}: {{item.message}}
</view>

规定下标从1开始而不是从0开始：
<view class="list" wx:for="{{array}}" wx:if="{{index > 0}}">

案例如下：

修改页面顶部导航栏信息

在.json文件中：

 {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "缴费记录","navigationBarTextStyle": "black"}

圆形显示

wxss：

border-radius: 50%;
overflow:hidden;

文本超链接添加方式

在微信小程序中使用：

navigator

进入到需要添加navigator的页面：
案例：
*url必须在app.json中有写明

<navigator url="../applybill/applybill" open-type="navigate"><text>{{item. bill}}</text></navigator>

判断状态显示不同内容

.wxml文件：

<view class="right" wx:if="{{item.bill==0}}">
<!-- <text>eg</text> --><navigator url="../applybill/applybill" open-type="navigate"><text class="zero">申请开票</text></navigator>
</view>
<view class="right" wx:elif="{{item.bill==1}}"><text class="one">已申请发票，开票详情请联系0991-0000000</text>
</view>

获取当前用户的姓名和电话

按钮获取电话：
先进行授权：
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

时间选择器

eg：

<view class="test">
<picker class="testp" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="test2">
<image src="../../resources/arrowgray.png"></image>
<view>时间选择</view>
</view>
</picker>
</view>

按钮跳转页面

1、打开app.json，注册新页面到小程序内，这样这个新的页面才可以被访问到
2、回到按钮页面，给新加的按钮添加点击处理事件处理函数
<button bindtap="jumpToMyPage"><text>我的用网申请</text></button>
3、打开按钮页面.js文件，输入代码：（在Page({})中添加）

//跳到另一个页面的事件处理函数jumpToMyPage: function(){wx.navigateTo({url: '../myuse/myuse'})},

button跳转页面

通过bindtap属性绑定点击事件实现页面跳转
跳转到tabBar页面和非tabBar页面所调用的函数方法不一样
1、跳转到TabBar页面需用wx.switchTab()方法

//js部分示例代码//跳转到tabBar页面  
gotoPage: function (options) {   wx.switchTab({      url: '../homepage/homepage',    //要跳转到的页面路径})  },

2、跳转到非tabBar页面用wx.navigateTo()方法

//js部分示例代码
//跳转到非tabBar页面  
gotoPage: function (options) {wx.navigateTo({url: '../homepage/homepage',//要跳转到的页面路径})  },

3、直接跳转

    wx.redirectTo({url:'../record/record'})

4、关闭所有页面只打开某页面：

wx.reLaunch({url:'../record/record'})

按钮获取id

wxml里写上data-id="{{xxx.id}}"
eg：

<button data-id="{{item.id}}" bindtap="upId"><text class="zero">申请开票</text></button>

js里删除时
获取：let id = e.currentTarget.dataset.id
eg：

upId(e) {let paymentId = e.currentTarget.dataset.idwx.setStorageSync('paymentId', paymentId)console.log(paymentId)//跳转到非tabBar页面  wx.navigateTo({url: '../applybill/applybill', //要跳转到的页面路径})},

//将缴费记录选择申请开票的id传入申请开票upId(e) {// let paymentId = e.target.idlet paymentId = e.currentTarget.dataset.idwx.setStorageSync('paymentId', paymentId)console.log('paymentId:'+paymentId)//跳转到非tabBar页面  wx.navigateTo({url: '../applybill/applybill?paymentId+paymentId', //要跳转到的页面路径})},

设置按钮在点击后不能再点击

disable：false/true
参考链接：微信小程序button的可用不可用动态实现
eg：
设置button：<button disabled="{{disable}}" bindtap="add" formType="submit">提交</button>
在Page-data中添加：disable: false,
在js文件中添加：

this.setData({disable: true})

设置小程序分享至好友或朋友圈

转发给朋友：

/*** 用户点击右上角分享*/onShareAppMessage: function () {}

弹框显示

参考链接：微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet，modal控件解释及input输入框值的获取

wx.showToast({duration:500,//显示时长mask:true,是否显示透明蒙层，防止触摸穿透，默认：false  title: '添加成功'})

Q：弹框延时失效，跳转页面直接消失
A：加上延迟效果setTimeout
eg：

wx.showToast({duration: 500, //显示时长mask: true,title: '添加成功',success: function () {setTimeout(function () {wx.navigateBack({delta: 1,})}, 500)}})

Q：弹窗中加入文字，但是运行出来只显示了一行字
A： icon：‘none’ //可以添加更多文本，不显示图标

小程序返回上一个页面问题

1、用户从列表页进入到一个表单详情页
2、在表单详情页填上相关数据，保存后进入下一个表单页
3、在下一个表单页中点返回键，需求是直接返回到列表页中。但目前只能返回到上一个表单页，这样就可能造成用户二次提交表单。
参考：小程序返回上一个页面问题
js 返回上一页面
主要代码部分：

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var beforePage = pages[pages.length - 2];//前一页
wx.navigateBack({delta: 1,})

下拉框选择

  <view class="selectterminal"><view class="title">所属航站楼:</view><!-- 通过点击事件改变图片的旋转角度、自定义下拉框的高度 --><view class="value" bindtap="select"><view class="item"><block wx:if="{{model.terminal==0}}"><label class="val" bindtap="terminalChange">T1航站楼</label></block><block wx:elif="{{model.terminal==1}}"><label class="val" bindtap="terminalChange">T2航站楼</label></block><block wx:elif="{{model.terminal==2}}"><label class="val" bindtap="terminalChange">T3航站楼</label></block><block wx:else><label class="val" bindtap="terminalChange">请选择所在航站楼\t▼</label></block></view></view></view>

  terminalChange: function (e) {let that = this;wx.showActionSheet({itemList: ['T1航站楼', 'T2航站楼', 'T3航站楼'],success: function (res) {if (res.tapIndex == 0) {that.setData({["model.terminal"]: 0,})commercialForm.terminal=1}if (res.tapIndex == 1) {that.setData({["model.terminal"]: 1,})commercialForm.terminal=2}if (res.tapIndex == 2) {that.setData({["model.terminal"]: 2,})commercialForm.terminal=3}console.log("terminal:" + commercialForm.terminal)}})},

上传图片设置大小限制

eg:

  getBusinessLicense: function (e) {var that = this;wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: res => {var size = res.tempFiles[0].size;console.log(size)if(size<=1*1024*1024){//设置图片大小不超过2Mthat.setData({['tempFilePaths[' + e.target.id + ']']: res.tempFilePaths[0]})wx.getFileSystemManager().readFile({filePath: res.tempFilePaths[0], //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调// console.log('data:image/png;base64,' + res.data)console.log('======================================')BusinessLicense = res.datacommercialForm.businessLicense = BusinessLicense}})}else{wx.showToast({duration: 1000, //显示时长title:'图片不能大于1M',icon:'error'})}}})},

设置按钮不可见

设置visible：

<button wx:if="{{visible}}" class="givePhone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权手机号</button>

if (phoneNumber!=null) {this.setData({visible:false})}

设置未登录状态不可点击进入

通过获取手机号来查看：（以下案例在我的页面自动登录）

gotoapplication: function (param) {let phoneNumber=wx.getStorageSync('phoneNumber')if(phoneNumber){wx.navigateTo({url: '../request/request',})}else{wx.showToast({icon:"none",title: '请在我的界面授权手机号',})}},

按钮文字居中显示

  /* display: flex; */justify-content:center; align-items:center

设置有数据时显示，无数据时提示

    <block wx:if="{{datalist.length!=0}}">...</block><block wx:else>无我的用网申请记录</block>

小程序输入框光标居中输入

<input class="inputpay" bindinput="getPay" placeholder='请输入缴费金额' style='text-align:center' type='text' maxlength="30"></input>

设置picker（底部选择）选择另一个页面的数据

参考链接：微信小程序开发之picker选择器组件用法
eg：
wxml文件：

    <!-- 选择商户，底部选择 --><view class='shopname'><view class='title'>商户名称：</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{merchantList}}" range-key='merchantName'><text wx:if="{{merchantId===''}}">请选择要交费的商户名称\t▼</text><view class='flex-item' style="font-size: 20px;">{{merchantList[index].merchantName}}</view></picker></view>

js文件：

  // 选择商户payAssumeAdd() {this.setData({ //点击后设置不可点击disable: true})let that = this//测试数据payForm.openId = wx.getStorageSync('openId')console.log(util.formatTime(new Date(), "yyyy-MM-dd")) //当前日期payForm.paymentDate = util.formatTime(new Date(), "yyyy-MM-dd")payForm.expireDate = util.formatTime(new Date(), "yyyy-MM-dd")if (this.data.merchantId === "") {this.setData({disable: false})return wx.showToast({icon: "error",title: '请选择商户',duration: 1000, //显示时长})}payForm.merchantId = this.data.merchantIdconsole.log(payForm)wx.request({url: 'https://cj.zhouwx.com:8443/wx/paymentApplication',method: 'POST',header: {"content-type": "application/json"},data: payForm,success: res => {console.log("成功", res)that.setData({result: res.data})if (res.data.code === 200) {this.setData({disable: true})wx.showToast({title: '已上传模拟缴费信息',duration: 500,icon: 'success',mask: true,success: function () {setTimeout(function () {wx.navigateBack({delta: 1,})}, 900)}})} else {wx.showToast({icon: "error",title: '信息不完整',duration: 1000, //显示时长})this.setData({disable: false})}},fail(res) {console.log("失败", res)}})},/*** 页面的初始数据*/data: {index: undefined,// index: 0,merchantList: [], //商户merchantId: '',},bindPickerChange: function (e) {//获取选择的项目数据var mchObj = this.data.merchantList[e.detail.value];this.setData({index: e.detail.value,merchantId: mchObj.id,})console.log(this.data.merchantId);},//加载页面显示onLoad: function (options) {//查我的用网申请数据let that = thislet openId = wx.getStorageSync('openId')let sessionKey = wx.getStorageSync('sessionKey')wx.request({url: 'https://cj.zhouwx.com:8443/wx/getPersonMerchantList',method: 'POST',data: {openId: openId,sessionKey: sessionKey},header: {'content-type': 'application/json' // 默认值},success(res) {console.log("查询成功", res)if (res.data != null) {that.setData({merchantList: res.data,})} else {wx.showToast({icon: "none",title: '查询失败',})}},fail(res) {console.log("查询失败", res)},})},

图片二维码长按识别

加入show-menu-by-longpress属性：

<image src="../../resources/testimg.jpg" show-menu-by-longpress="{{true}}" alt=""/>

页面未加载出内容显示加载中

参考：小程序showLoading：网络请求前显示“加载中…”，请求完成时关闭加载中
eg：（js文件）
onLoad方法：

//显示加载中信息
wx.showLoading({title: '加载中...',
})
wx.request({url: '',success(res){},fail(){},
//添加wx.hideLoading()一定要添加到complete里complete(){wx.hideLoading()}
})

模拟器显示，真机不显示loading：
（设置延时）

wx.showLoading({title: '加载中',
})
setTimeout(function () {wx.hideLoading()
}, 2000)

分页显示数据

暂未解决
参考：
最佳方式实现微信小程序分页加载数据
小程序分页实现
微信小程序分页
小程序列表页如何实现分页教程
微信小程序实现分页加载效果
B站视频讲解（best）

建立表格

HTML文件：

<!-- 表格显示 --><view class="table"><view class="tr"><view class="th1">网络维护服务类别</view><view class="th2">月份</view><view class="th3">金额(元)</view><view class="th4"></view></view><view class="tr" wx:for="{{selectList}}" wx:for-index="indexSelect" wx:for-item="item" wx:key="indexSelect"><view class="td1">{{item.selectService}}</view><view class="td2">{{item.selectMonth}}</view><view class="td3">{{item.oneListPay}}</view><view class="td4"><text data-index="{{item.indexSelect}}" class="cancelSelect" bindtap="cancelSelect">{{item.cancel}}</text></view></view><view class="total">总计：{{totalPay}}</view><view class="lookDeal"><radio-group class="radio-group" bindchange="radioChange"><label class="radio"><radio checked="{{radioChecked}}" value="radioOK" color="rgb(22, 155, 213)" /></label></radio-group>查看<text class="deal" bindtap="goBillPage">\t网络维护协议\t</text>并手签确认</view></view>

css文件：

/* 表格 */
.table {width: 95%;border-right: 0;border-bottom: 0;
}/* 每行 */
.tr {width: 100%;display: flex;justify-content: space-between;
}/* 表头，每列(每格) */
.th1,
.td1 {width: 300rpx;padding: 5px;display: flex;border: 1px solid #dadada;text-align: center;display: flex;align-items: center;justify-content: center;
}.th2,
.td2 {width: 80rpx;padding: 5px;display: flex;border: 1px solid #dadada;text-align: center;display: flex;align-items: center;justify-content: center;
}.th3,
.td3 {width: 130rpx;padding: 5px;display: flex;border: 1px solid #dadada;text-align: center;display: flex;align-items: center;justify-content: center;
}.th4,
.td4 {width: 80rpx;padding: 5px;display: flex;border: 1px solid #dadada;text-align: center;display: flex;align-items: center;justify-content: center;
}/* 总计 */
.total {margin-top: 5px;text-align: right;
}/* 查看网络协议 */
.lookDeal {margin-top: 20rpx;display: flex;margin-top: 5px;
}/* 协议 */
.deal {color: rgb(22, 155, 213);
}/* 取消按钮 */
.cancelSelect {color: rgb(22, 155, 213);
}

无网络显示内容（图片）

无网络显示：

<view class="noMessage" hidden="{{nonet}}"><image src="../../resources/2-NoNetwork.png"></image>
</view>

//无网络时做提示no netwx.onNetworkStatusChange(function(res){console.log(res)if(res.networkType == "none"){that.setData({nonet: false})}else{that.setData({nonet: true})}})

无网络显示（增加“点击重试”按钮版）：

<block wx:if="{{nonet===false}}"><view class="noMessage" hidden="{{nonet}}"><image src="../../resources/2-NoNetwork.png"></image></view><button bindtap="retry"class="retry">重试</button>
</block>

  retry() {wx.redirectTo({url:'../record/record'})},

输入框只允许输入大写字母和数字

  gettaxNumber(event) {taxNumber = event.detail.value.replace(/[^A-Za-z0-9]/g,'').toUpperCase()billForm.taxNumber = taxNumberreturn taxNumber},