一.设置底部导航json
"tabBar": {
"color": "#A6A6A6",
"selectedColor": "#3B7CFF",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/icon01.png",
"iconPath": "images/icon1.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/icon02.png",
"iconPath": "images/icon2.png",
"pagePath": "pages/logs/logs",
"text": "我要开票"
}
]
},
二.设置背景颜色
"backgroundColor": "#F6F6F6",不起作用,其实用css设置背景颜色就好,这个只是设置了下拉漏出来的颜色,模拟器上不显示
三.px和rpx转化
四. npm引入小程序官方WeUI组件库weui-miniprogram
1、打开cmd,在小程序根目录内,初始化npm npm init
2.执行命令安装 npm 包: npm install --save weui-miniprogram
3、安装完成后,在微信开发者工具中的菜单栏:工具 ------ 构建 npm :
4.在微信开发者工具中的右上角:详情 ------ 本地设置, 勾选“使用 npm 模块”选项:
5、app.wxss引入全局样式
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
6.以pages的index为例,json中引入cell:
{
"usingComponents": {
"mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell"
}
}
7、点击文档中的组件示例代码,开始ctrl C + ctrl V吧~
五:微信小程序的标签和html标签比较
html | 小程序 |
<div></div> | <view></view> |
<h1><h2>....<h6> <p><span> | <text></text> |
<input type="text"> <input type="checkbox"> <input type="radio"> <input type="file"> | <input /> <checkbox /> <radio /> <view bindtap="changeImage"></view> |
<select> <option></option> <option></option> </select> | <picker range="{{area}}"> <view> {{area[index]}}</view> </picker>
|
<a href="#"></a> | <navigator url="#" redirect></navigator> |
<img src=""> | <image mode="aspectFill" src=""> |
<i class="icon"></i> | <icon></icon> |
六:设置文本显示一行
给text标签设置
.objName{width: 400rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;}
七:动态添加class,根据不同状态添加class
<text class="{{item.status=='2'?'status02':''||item.status=='3'?'status03':''}}">{{item.status_show}}</text>
八:小程序实现选项卡
index.js
//invoiceInfo.js
//获取应用实例
const app = getApp()
Page({
data: {
activeIndex:0,
},
onLoad() {
},
// 个人/机构切换
navChange:function(e){
const that = this;
if (that.data.activeIndex === e.target.dataset.current) {
return false;
} else {
that.setData({
activeIndex: e.target.dataset.current
})
}
},
//获取当前滑块的index
bindchange: function (e) {
const that = this;
that.setData({
activeIndex: e.detail.current
})
},
})
index.wxml
<view class="navbar">
<text class="{{activeIndex == 0 ?'active':''}}" data-current="0" bindtap="navChange">个人开票</text>
<text class="{{activeIndex == 1 ?'active':''}}" data-current="1" bindtap="navChange">机构开票</text>
</view>
<swiper current="{{activeIndex}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item>
<swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
</swiper>
九:微信小程序换行用 \n 必须是在text标签中使用,view中没有效果
十:点击隐藏/显示
十一: 控制input输入小数,并且只能输入小数点后两位
inputAmount: function (e) {
var amountValue;
if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证,提现金额小数点后不能大于两位数字
amountValue = e.detail.value;
} else {
amountValue = e.detail.value.substring(0, e.detail.value.length - 1);
}
this.setData({
amountValue: amountValue,
})
},
十二:微信小程序md5加密算法封装及用法详解--微信小程序生成md5签名
https://blog.csdn.net/abs1004/article/details/79105046
小程序mpvue中flyio的使用方法
https://www.cnblogs.com/fuzhengyi/p/9579804.html
https://blog.csdn.net/weixin_34066347/article/details/88860416
小程序授权,获取code
wx.login({
success (res) {
if (res.code) {
//发起网络请求
//使用 code 换取 openid 和 session_key 等信息
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
```
微信小程序 this.setData,改变对象中某一个值
this.setData({
['invoiceInfo.donateProjectLogo']: res.data.donateProjectLogo,
['invoiceInfo.donateProjectName']: res.data.donateProjectName,
['invoiceInfo.donateProjectChannel']: res.data.donateProjectChannel,
['invoiceInfo.qrStatus']: res.data.qrStatus
})