Ⅱ 微信小程序開發常用知識點
與iOS開發很相似，小程序的導航欄也可以全局設置一下，在公共文件app.json中設置了導航欄相關樣式如下：
這個地方是全局設置，如果想要在不同的頁面設置各自的標題屬性，只需要在該子級文件中設置
子頁面想調用共公js的方法，需先在子頁面js中先實例化app:具體過程如下
在需要調用的子頁面中，
如果是嵌套循環，很容易出現多個list和index，例如表視圖一樣，所以在小程序中可以重命名 list 和index 方法為：wx:for-index='重命名' wx:for-list="重命名"
在APP開發中，UI復用是一個很好的手段，在小程序上就是模板template。
在逛小程序聯盟的時候發現了一個大濕總結的比我好，搬過來一下。
微信小程序中，如果幾個頁面中需要引用同一個header/footer，當定義了公共模板時，有兩種引用方法如下：
方法一：在公共模板中定義template元素，利用 方法 ,這種方式只會顯示公共模板的template裡面的內容，之外的內容不會顯示
** 方法二:**
總結：import方式和imclude方式的不同在於前者僅引用公共模板中的template裡面的內容後者僅引用template以外的內容，顯而易見，include方式更簡單一些，在wxml中只需要一句話即可。
rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px。
具體的 這里有一片文章介紹的很詳細 ， 還有這個
小程序的事件主要有：
小程序中的wxml中綁定事件有兩種：以touchtab為例 ，在wxml中必須有bind/catch不然無法實現上述事件
bindtouchtab和catchtouchtab bind的不會阻止事件冒泡（元素最里層到最外層函數執行），catch會阻止冒泡，只是冒泡到當前層結束
如果想在元素執行某事件時把元素的某個屬性傳到後台 可在元素中加入data-屬性名稱=「xxx」,在事件函數中 function(event){}的event中的currentTarget裡面的data-set裡面可查看接收在元素中綁定的的id或者其他屬性clientX/Y 查看滑動手指距離屏幕左側的位置，查看滑動位置也可以通過touchstart和和touchend的clientx/y獲取
看到幾個別人寫的，瞬間石化，果斷收藏。
在小程序中，定義了一項工具文件utils,此文件的js旨在本文件之內有效，當其他子頁面想調用其中的js方法或者變數時，需要兩步驟：
1：在utils被調用的js文件中，面向對象的方式模型輸出： mole.exports={要調用的函數名稱：要調用的函數名稱 }；
2：在要調用的js文件中模塊化引入utils的js文件 var object=require("utils被調用的js文件地址")； 可以輸出一下object就能看到被調用的方法了；
例子如下：
要調用的js文件：
小程序的後台獲取數據方式get/post具體函數格式如下：wx.request({})
如果屏幕中某元素的內容超過此元素的高度，可設置元素為scroll-view 為滾動狀態元素，這樣可以做到元素固定高度且元素內容滾動屏幕不滾動的效果；
scroll-view標簽的主要屬性分為以下幾種：
微信小程序廣告輪播元素 圖片所在元素/swiper-item>
其中屬性有：
圖片更改事件：bindchange='imgchange' imagechange()的e.detail.current為當前顯示頁面的下標值
Ⅲ 微信小程序 導航欄切換視圖
效果圖
.wxml頁面
<!-- nav導航 -->
<view class="goods">
<block wx:for="{{tab}}" wx:key="key">
<view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view>
</block>
</view>
<!--導航下 視圖滑塊 -->
<swiper bind:change="changeTab" current="{{index}}">
<block>
<swiper-item>
<text>11111</text>
</swiper-item>
<swiper-item>
<text>2222</text>
</swiper-item>
<swiper-item>
<text>3333</text>
</swiper-item>
</block>
</swiper>
.js頁面
Page({
data: {
tab:[
{titcle:"商品參數",style:"color"},
{titcle:"商品介紹",style:""},
{titcle:"商品規格",style:""},
],
index:0,
goods:''
},
tarClick(e){
// console.log(e.currentTarget.dataset.index)
let tab = this.data.tab;
let that = this;
let index = e.currentTarget.dataset.index
console.log(index)
tab.map((item,key)=>{
if(key==index)
{
tab[key]['style']='color';
}else{
tab[key]['style']='';
}
})
that.setData({tab,index})
},changeTab(e){
console.log(e.detail.current)
let tab = this.data.tab;
let that = this;
let index = e.detail.current
console.log(index)
tab.map((item,key)=>{
if(key==index)
{
tab[key]['style']='color';
}else{
tab[key]['style']='';
}
})
that.setData({tab,index})
},
}）
.wxss頁面
/* pages/details/details.wxss */
.goods{
width: 100%;
height: 100rpx;
/* background-color:yellowgreen; */
display:flex;
justify-content: space-around;
align-items: center;
}
.goods view{
width: 160rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.color{
color: red;
border-bottom: 2px solid red;
}
Ⅳ 微信小程序開發怎麼讓圖片符合圖片播放
具體步驟：
1、首先打開微信開發者工具。
2、在項目文件目錄中打開swiper.wxml文件。
3、然後設置swiper標簽。
4、使用current屬性來設置當前要播放哪張圖片。
5、在swiper-item裡面設置好要播的圖片。
6、打開模擬器，顯示綠色表示開啟。
7、在窗口中我們可以看到當前播圖的圖片就是我們剛才所設置的。【點擊了解更多加盟項目】
Ⅳ 微信小程序--swiper中current問題
2019/2/22
index.wxml文件
index.js文件
圖片數組 imageArr 動態的改變數組的數量，
例如：當 imageArr 中的長度為4，輪播滾動到 3 ，current=3；此時swiper沒有綁定current，並將 imageArr 的長度動態改為2，這會出現current還是3，導致swiper不顯示的問題。
解決：
index.wxml 中在swiper中綁定current
index.js 中增加current
Ⅵ 微信小程序bindchange是什麼事件
bindChange為輸入框發生改變事件。微信提供的bindchange在支持方面還有小問題，目前是失去焦點才能觸發到此事件的發生。
如果在bindchange的事件回調函數中使用setData改變current值，則有可能導致setData被不停地調用，因而通常情況下請在改變current值前檢測source欄位來判斷是否是由於用戶觸摸引起。
swiper里加了bindchange事件，有很多個swiper-item，連續快速切換swiper-item觸發bindchange事件，小程序會出現一直無限觸發bindchange事件。請檢查是否在change事件中使用setData改變current值，請避免該操作。
(6)微信小程序current擴展閱讀
bindchange是swiper組件的屬性之一，類型為eventhandle。
current改變時會觸發change事件，event.detail={current,source}。當滑塊的current改變時會觸發該事件並執行綁定的方法。
swiper組件是小程序中使用頻次最高的組件之一，屬於視圖容器類組件，它通過對自身屬性進行簡單配置就可以實現在前端開發中要寫很多代碼才能完成的輪播圖效果。
Ⅶ 微信小程序頁面返回傳遞參數
let userInfo = {...}; //需要傳遞的參數，這里用對象舉例。
let pages = getCurrentPages(); //返回pages的所有信息；數組格式
let prevPage = pages[ pages.length - 2 ]; //返回上一個頁面的所有信息 上一級為-2
prevPage.setData({
user:userInfo //user為上個頁面需要修改的數據，如data裡面的數據，數據格式要對應。
});
wx.navigateBack({
delta:1 // 返回上一級頁面。
})
Ⅷ 微信小程序 getCurrentPages獲取當前頁面棧
通常小程序直接頁面傳值是通過 url 拼接或利用 storage 。
比如在訂單確認頁面需要進行收貨地址選擇會進入到地址選擇頁面，這個訂單確認頁面與地址選擇頁面的通訊就很頭疼。
而 getCurrentPages（） 剛好解決了這一難題。
使用方法
Ⅸ 微信小程序頁面常用的5種跳轉方法
為了不讓用戶在使用小程序時造成困擾，微信小程序規定頁面路徑只能是 五層 ，所以需盡量避免多層級的交互方式。 而頁面跳轉則涉及到多個頁面層級。 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。 需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔； 如 'path?key=value&key2=value2' eg: wx.navigateTo({ url:'test?id=1' }) 這種跳轉方式默認有返回按鈕，返回到上一個頁面 關閉當前頁面，跳轉到應用內的某個頁面。 需要跳轉的應用內非 tabBar 的頁面的路徑，路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔； 如 'path?key=value&key2=value2' eg: wx.redirectTo({ url:'test?id=1' }) 這種跳轉方式默認有返回按鈕，返回到上一個頁面的再上一層 需要跳轉的應用內頁面路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔； 如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數 eg: wx.reLaunch({ url:'test?id=1' }) 這種跳轉方式默認沒有返回按鈕，不需要默認返回按鈕的頁面就可以使用這個api了 需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 欄位定義的頁面），路徑後不能帶參數 { "tabBar": { "list": [{ "pagePath":"index", "text":"首頁" },{ "pagePath":"other", "text":"其他" }] } } wx.switchTab({ url:'/index' }) 我們需要調轉到tabbar定義的頁面的時候，就需要這個api了。踩過這個坑的人就知道，除了這個api，其他的都不能跳轉到tabar定義過的頁面 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。