前端
快捷键
代码规范快捷键：
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}}">哈哈 啊   哈哈哈（空格是中文字符一半大小）</text>
<text decode="{{true}}">哈哈 啊   哈哈哈（空格是中文字符大小）</text>
<text decode="{{true}}">哈哈 啊 哈哈哈（空格根据字体设置）</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；
or
flex布局里的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.id
wx.setStorageSync('paymentId', paymentId)
console.log(paymentId)
//跳转到非tabBar页面
wx.navigateTo({
url: '../applybill/applybill', //要跳转到的页面路径
})
},
//将缴费记录选择申请开票的id传入申请开票
upId(e) {
// let paymentId = e.target.id
let paymentId = e.currentTarget.dataset.id
wx.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){//设置图片大小不超过2M
that.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.data
commercialForm.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.merchantId
console.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 = this
let 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 net
wx.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 = taxNumber
return taxNumber
},