template模版的使用
使用import 標簽引入需要的template,wx:for屬性循環遍歷list,template標簽中的is屬性要於template.wxml中的name屬性一一對應,data屬性寫入需要插入的詳細數據
<!--pages/index_page/footPrint/footPrint.wxml-->
<import src="template/template.wxml"/>
<block wx:for="{{listul}}">
<template is="user_list" data="{{lookDate:item.lookDate,img:item.img,name:item.name,numb:item.numb,peo:item.peo,price:item.price}}"/>
</block>
ajax的調用,get請求和post請求的區別
如果你是get請求,直接使用wx提供的模版樣式是沒有問題的
wx.request({
url: API_URL + '/pinduoduo/getMyFootPrint.json',
method: 'get',
data: {
unionid: that.data.unionid
},
success: function (res) {
}
})
但是我們大多數的時候會用到post請求來與后台進行交互,這個時候你就需要對請求頭重新定義,才會將post數據傳過去
wx.request({
url: API_URL + '/pinduoduo/updateDefaultAddresStatus.json',
method: 'post',
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
id: e.currentTarget.dataset.id,
isdefault:1
},
success: function (res) {
}
class類名切換實現動態顯隱等效果
遇到類似於jquery方法addclass()和removeClass()的條件判斷時,可以使用下面的 方法:
<view class="nav_initialize {{ispop==1?'hide':''}} ">
在對應需要更改class的方法中使用下面的方法完成修改:
clickse:function(){
var that = this;
that.setData({
ispop: 1
});
}
.全局變量的定義和使用
需要使用單個js內全局變量page里面的值的時候
Page({
data: {
unionid:'123',
}
})
利用下面的方法調用即可
minePage: function (e) {
var that=this;
that.data.unionid
}
關於小程序開發工具的使用
因為小程序是最近幾年才逐漸火熱的一門技術,所以在開發工具的使用上,目前只有借用官網提供的工具進行開發,調試。小程序的更新迭代速度大約15日左右,這也意味着技術迭代速度非常快,也就是說開發工具我們最好使用低於最新版一個版本的穩定性才更高一些。
延時操作
小程序的值傳遞方式是異步方式,往往我們的后續操作需要依賴上一步設置的變量值,加上網絡請求響應速度,方法的執行時間等,導致后續操作無參數可用,我們可以使用定時器來延時請求或方法的執行。
setTimeout(function () {
//要延時執行的代碼
that.formul();
}, 300)
標簽自定義屬性的使用
例:我們要使用標簽的data-type屬性值
modfinylist:function(e){
var type=e.currentTarget.dataset.type;//獲取ID屬性的值
wx.navigateTo({
url: '../modifyaddress/modifyaddress?type='+type,//URL帶參數跳轉
})
}
標簽固有屬性獲取
例:我們要使用標簽的id屬性值
modfinylist:function(e){
var id=e.currentTarget.id;//獲取ID屬性的值
wx.navigateTo({
url: '../modifyaddress/modifyaddress?id='+id,//URL帶參數跳轉
})
}
加載中的使用
有時候為了緩沖網絡請求時間,友好完善交互體驗我們需要在請求前顯示正在加載方法,請求后取消正在加載
wx.showLoading({//顯示loading
title: '加載中',
})
setTimeout(function(){//兩秒后取消顯示loading
wx.hideLoading()
},2000)
獲取input等標簽的value
checkname:function(e){
var that = this;
that.setData({
inname: e.detail.value//input的value值
})
}
this的使用
和常規的前端開發一樣,微信小程序的this也是指代觸發事件的元素,當操作過多時候,this的指代會模糊,錯誤。所以使用前請先保存this。
checkname:function(e){
var that = this;
}
背景圖的使用
在大部分的頁面布局上,我們通常會使用背景圖的css變現來渲染頁面,但小程序的背景圖與平常h5開發有很大差別
<view class='nav_main' style="background-image: url('../../../img/inte_red.png');"></view>
.nav_main{//如果你的背景圖路徑是相對路徑,那么背景圖屬性一定要寫在標簽里。如果是絕對路徑,則可以忽略這一點
margin: 0 auto;
margin-top:15%;
width: 80%;
height: 300rpx;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
彈出框的提示
wx.showToast({
title: '意見反饋成功',
icon:'success',
success:function(){//提示彈框成功的回調函數,注意這里面的成功是成功調用彈框,不是彈框調用完成
setTimeout(function () {
wx.redirectTo({
url: '/pages/index_page/mine/mine',
})
}, 1000)
}
});
json文件的配置
json文件中是對小程序的配置項,需要注意的是屬性值的引號之間不能存在空格
{
"navigationBarBackgroundColor": "#FF4A4A",//錯誤寫法:" #FF4A4A"
}
頁面跳轉問題
在開發小程序時,用到下面三種頁面跳轉方法,路徑寫對后跳轉沒有反應,也沒報錯。
wx.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
wx.redirectTo(OBJECT)
關閉當前頁面,跳轉到應用內的某個頁面。
wx.navigateBack(OBJECT)
關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧,決定需要返回幾層。
跳轉不成功分析原因:
1.你的頁面在app.json文件中注冊了嗎?
2.你的url地址寫對了嗎,目錄層級沒錯嗎?
3.你要跳轉到的頁面是非tabBar的頁面嗎?如果是tabBar頁面,恭喜你,找到問題了。
wx.navigateTo/wx.redirectTo只能用在非tabBar頁面的跳轉,要跳轉到tabBar頁面,需要使用wx.switchTab
4.navigateTo中規定只能保留5成棧,超出五層也會導致鏈接失效,你可以選擇redirectTo跳轉。