1:wx:for=”{{}}”遍历时,要加wx:key=""
否则会有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.,但页面不会报错
2:事件方法传参的写法:bindtap=”toDetail” data-data=”{{item.url}}”
js:
toDetail:function(e){
let url = e.currentTarget.dataset.data;
wx.navigateTo({
url: '../bookdetail/detail'
});
}
3.swiper自定义圆点样式
<view class="wrap">
<swiper class="swiper_book_img" current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{banner}}" wx:key="unique">
<swiper-item class="slide_img">
<image src="{{item.picUrl}}" class="slide-image" width="100%" height="110" ></image>
</swiper-item>
</block>
</swiper>
<!--重置小圆点的样式 -->
<view class="dots">
<block wx:for="{{banner}}" wx:key="unique">
<view class="dot{{index == currentSwiper ? ' active' : ''}}" id="{{index}}"></view>
</block>
</view>
</view>
js:
data: {
// tab切换
currentSwiper: 0
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
wxss:
/*用来包裹所有的小圆点 */
.dots {
display: flex;
justify-content:center;
flex-direction: row;
margin:22rpx auto;
}
/*未选中时的小圆点样式 */
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-right: 18rpx;
background-color: #969FA9;
opacity: 0.5;
}
/*选中以后的小圆点样式 */
.active {
width: 20rpx;
height: 10rpx;
border-radius:20rpx;
background-image: linear-gradient(-90deg, rgba(150,159,169,0.50) 24%, #F5F7FA 100%);
border-radius: 100px;
}
4.微信小程序获取当前页面的url
使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
可以写成工具函数放到utils中:
/获取当前页url/
function getCurrentPageUrl(){
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
return url
}
/获取当前页带参数的url/
function getCurrentPageUrlWithArgs(){
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数
var urlWithArgs = url + '?'
for(var key in options){
var value = options[key]
urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)
return urlWithArgs
}
module.exports = {
getCurrentPageUrl: getCurrentPageUrl,
getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs
}
5.A页面跳转到B页面 标题更新
全局的app.js 中设置参数存放标题
globalData: {
userInfo: null,
bookTitle:””
}
A页面跳转方法中设置全局的标题参数
app.globalData.bookTitle =”标题”
B页面
onLoad:function(){
wx.setNavigationBarTitle({
title: app.globalData.bookTitle
})
}
6 scroll组件
<scroll-view scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore" lower-threshold="50" bindscroll="scroll">
scroll组件绑定了 bindscroll=”scroll”方法,没定义这个方法时 ,会出现这样的错误提示,但不影响效果,滚动正常,去掉即可
7.微信小程序 —— button按钮去除border边框
在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。
但是在微信小程序中使用:after选择器就可以实现这一功能。
使用 button::after{ border: none; } 来去除边框
8 WxParse.js 富文本格式转换
下载https://github.com/icindy/wxParse项目,复制图上指定文件夹
var WxParse = require(‘../../wxParse/wxParse.js’);引用wxParse.js文件 到要展示的页面业务逻辑js中,
@import “/wxParse/wxParse.wxss”;引用到全局的app.wxss中
在要展示的.wxml页面中 引用模板
“article_content”自定义的名称,与js中定义的变量一致
.js中
var util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse.js');
const app = getApp()
Page({
data:{
articel:[],
},
onLoad:function(options){
let bid = options.bid;
let cid = options.cid;
let that = this;
console.log(bid+"==="+cid)
wx.request({
url:'https://wap.cmread.com/rbc/l/r.jsp?&cm=D00104T9&vt=9',
data:{
'bid':bid,
'cid':cid
},
header:{
'content-type': 'application/json'
},
success:function(res){
wx.setNavigationBarTitle({title:res.data.info[0].bookname});
let article_content =res.data.content;
WxParse.wxParse('article_content','html',article_content,that,0)
that.setData({
articel:res.data,
})
}
});
}
})
9 引用了富文本带来的bug
安卓机上扫码开发版预览项目,进入到富文本相关页面就会报错
解决方法 html2json.js中注释console.dir(value) 或者改成console.log(value)
10 本地存储之 数组对象格式
加入书架用到本地存储数据
data:{
list:[]
},
onLoad:function(options){
this.setData({
list:wx.getStorageSync('bookShelf') || [],
})
},
addshelf:function(e){
let empLst = this.data.list;
let book = e.currentTarget.dataset.item;
let that = this;
for(let i in book) {
empLst.push(book[i])
}
wx.setStorageSync('bookShelf',empLst)
that.setData({
isAdd: true
})
}
11 tabBar 底部菜单切换,数据没更新
推荐切换到书架页,页面打开时只执行一次onLoad生命周期,应该是每次点击切换都会执行onLoad,导致数据不同步。
解决方法
onShow:function(){
this.onLoad();
},