收集了一些小程序開發(fā)中常用到的知識點计呈，記錄一下抓半。（小程序開發(fā)文檔版本不斷在更新，可能有些以后用不了的止邮，這些發(fā)現(xiàn)了再更新，也請各位道友指正）

1.導(dǎo)航欄標題

與iOS開發(fā)很相似奏窑，小程序的導(dǎo)航欄也可以全局設(shè)置一下导披，在公共文件app.json中設(shè)置了導(dǎo)航欄相關(guān)樣式如下：

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序組件",
    "navigationBarBackgroundColor": "#f8f8f8",
    "backgroundColor": "#f8f8f8",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": "true"
  },

這個地方是全局設(shè)置，如果想要在不同的頁面設(shè)置各自的標題屬性埃唯，只需要在該子級文件中設(shè)置

{
"navigationBarTitleText": "頁面1"
}

2.子頁面調(diào)用公共js對象以便調(diào)用其方法

子頁面想調(diào)用共公js的方法撩匕，需先在子頁面js中先實例化app:具體過程如下

//app.js 中寫子頁面需要調(diào)用的公共方法
  App({
  // 自定義公共方法
  commonFunction:function(){
      return "公共方法"
    }
   })

在需要調(diào)用的子頁面中，

var app = getApp();//先實例化應(yīng)用
// console.log(app)//可查看公共app.js里面的方法
Page({
  data: {
  "label":app.commonFunction()//子頁面中調(diào)用公共appjs的方法
  }
})

3.嵌套循環(huán)時候墨叛，最好重命名下list和index

如果是嵌套循環(huán)止毕，很容易出現(xiàn)多個list和index模蜡，例如表視圖一樣，所以在小程序中可以重命名 list 和index 方法為：wx:for-index='重命名' wx:for-list="重命名"

<view>
重命名list和index：
<text class='{{classname}}' wx:for="{{array}}" wx:for-index="key" wx:for-item="value"> {{key}}--{{value}}    </text>
</view>

4.善用公共模板

在APP開發(fā)中扁凛，UI復(fù)用是一個很好的手段忍疾，在小程序上就是模板template。
在逛小程序聯(lián)盟的時候發(fā)現(xiàn)了一個大濕總結(jié)的比我好谨朝，搬過來一下卤妒。

微信小程序中，如果幾個頁面中需要引用同一個header/footer字币，當(dāng)定義了公共模板時则披，有兩種引用方法如下：
方法一：在公共模板中定義template元素，利用 方法 ,這種方式只會顯示公共模板的template里面的內(nèi)容纬朝，之外的內(nèi)容不會顯示

//在wxml中
<import src='公共模板地址'/>
<template is='模板里面template定義的name名稱' data='{{引入的數(shù)據(jù)1收叶，引入數(shù)據(jù)2}}'></template>

注意：這里的data='{{引入的數(shù)據(jù)1，引入數(shù)據(jù)2}}' 是在template中要提取js文件中的data數(shù)據(jù)里面的key名字共苛，否則無法顯示判没。
公共模板的wxml:在公共模板中必須定義每一個template的的name的名字，否則引用的時候無法得知引用具體某一個隅茎；

<template name='header'><!--必須有有name不然import方式無法判斷到底要引用哪一個tempalte-->
{{title.header}}<!--這個數(shù)據(jù)只是提取要引用的文件的里面js里面定義的對應(yīng)的數(shù)據(jù)澄峰，如果在其他文件中定義不在要引用的文件中無效-->
</template>

要引用的文件js定義數(shù)據(jù)：

data: {
title:{header:'這是template的header部分',footer:'這是template的footer部分',other:'這是tempalt外部部分'}
}

** 方法二:**

<include src="公共模板地址"/>這種方式是引入了模板中除了tempalte以外的所有內(nèi)容。
<include src="../../template/footer.wxml"/> 
公共模板的wxml:

{{title.other}}
js定義的數(shù)據(jù)：

 title:{header:'news里面的的header',footer:'這是template的footer部分'}

總結(jié)：import方式和imclude方式的不同在于前者僅引用公共模板中的template里面的內(nèi)容后者僅引用template以外的內(nèi)容辟犀，顯而易見俏竞，include方式更簡單一些，在wxml中只需要一句話即可堂竟。

5.小程序的尺寸單位rpx

rpx單位是微信小程序中css的尺寸單位魂毁，rpx可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx出嘹。如在 iPhone6 上席楚，屏幕寬度為375px，共有750個物理像素税稼，則750rpx = 375px = 750物理像素烦秩，1rpx = 0.5px。
具體的這里有一片文章介紹的很詳細郎仆，還有這個

6.小程序中用html只祠、css

• 小程序中的選擇器跟css的一樣.

  1：.class
  2： #id
  3: element
  4:分組 element,element
  5：偽類選擇器 :after :before 注意這里加入在了元素之內(nèi)的最后/最前
  

• 引入外部css文件的時候，只需像iOS中導(dǎo)入文件那樣扰肌，在其css文件的開始寫上 ： @import "外部地址" 即可抛寝。

• html中布局用div很多，但是在小程序中用view標簽，文本用text墩剖。

• 如果想用html原有的元素猴凹，必須在wxss中定義元素的display:block不然無法應(yīng)用，且html元素的id選擇器是無法應(yīng)用的岭皂。

7.事件總結(jié)/冒泡事件

小程序的事件主要有：

 touchtab 點擊事件
 touchstart 開始滑動
 touchmove 滑動中
 touchend 滑動結(jié)束
 touchcancel 滑動中斷

小程序中的wxml中綁定事件有兩種：以touchtab為例 ，在wxml中必須有bind/catch不然無法實現(xiàn)上述事件
bindtouchtab和catchtouchtab bind的不會阻止事件冒泡（元素最里層到最外層函數(shù)執(zhí)行）沼头，catch會阻止冒泡爷绘，只是冒泡到當(dāng)前層結(jié)束

如果想在元素執(zhí)行某事件時把元素的某個屬性傳到后臺 可在元素中加入data-屬性名稱=“xxx”,在事件函數(shù)中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中綁定的的id或者其他屬性clientX/Y 查看滑動手指距離屏幕左側(cè)的位置，查看滑動位置也可以通過touchstart和和touchend的clientx/y獲取

看到幾個別人寫的进倍，瞬間石化土至，果斷收藏。

8.點擊更換圖片

data: {
    "banner":"../../../images/banner.jpg",
    "daimaisrc":"../../../images/cart2_xz02.png",
    "bianjie":"../../../images/cart2_xz04.png",
    "shihui":"../../../images/cart2_xz05.png",
    cityName:"",
    getChannelByCityId:"",
    carName:"",
    carId:""
  },
  // 點擊選擇代買平臺
  daimaiClick: function(e){
    console.log("-------d："+this.data.daimaisrc);
    if(this.data.daimaisrc=="../../../images/cart2_xz02.png"){
      this.setData({
        daimaisrc: "../../../images/cart2_xz01.png"
      })
    }else{
      this.setData({
        daimaisrc: "../../../images/cart2_xz02.png"
      })
    }
  },

9.錨點定位

<!--index.wxml-->
<view class="container">
<!--品牌-->
<scroll-view scroll-y="true" scroll-into-view="{{toView}}"> 
  <view wx:for="{{citysMap}}">
    <view class="ncq-smal" id="{{index}}">
      {{index}}
    </view>
    <view wx:for="{{item}}" wx:for-item="citys" class="ncq-box" 
         data-cityname="{{citys.city_name}}" bindtap="cityNameClick">
            <label class="ncq-brand-name">{{citys.city_name}}</label>
    </view>
  </view>
</scroll-view>
 <!--  字母導(dǎo)航-->
    <view class="ncq-fixe-nav">
            <view  wx:for="{{citysMap}}" data-letter="{{index}}" bindtap="rightZmClick">
                <label>{{index}}</label> 
            </view>
    </view>
   <!-- 字母導(dǎo)航end-->
</view>
 //字母錨鏈定位
  topZmClick: function (event) {
    var letter = event.currentTarget.dataset.letter;
    this.setData({
      toView: letter
    })
  },
scroll-view {
  height: 600px;
}
注：scroll-view必須要設(shè)置高度猾昆，不然無效

10.調(diào)用工具js文件/utils文件中的函數(shù)/變量

在小程序中陶因，定義了一項工具文件utils,此文件的js旨在本文件之內(nèi)有效，當(dāng)其他子頁面想調(diào)用其中的js方法或者變量時垂蜗，需要兩步驟：
1：在utils被調(diào)用的js文件中楷扬，面向?qū)ο蟮姆绞侥Ｐ洼敵觯?module.exports={要調(diào)用的函數(shù)名稱：要調(diào)用的函數(shù)名稱 }；
2：在要調(diào)用的js文件中模塊化引入utils的js文件 var object=require("utils被調(diào)用的js文件地址")贴见； 可以輸出一下object就能看到被調(diào)用的方法了烘苹；
例子如下：

utils中被調(diào)用的js：

var URl='http://123.23.169';
 var getImageurl=function(imageurl){
return URl+imageurl;
 }
//  要引用這個文件的函數(shù)或者變量，除了在要引用的的js文件中模塊化之外（var utils=require('js地址')）片部，
// 在被引用的的js中要通過 module.exports={a:a}作為面向?qū)ο蟮淖兞枯敵龊瘮?shù)如下：
 module.exports={
     URl:URl,//要引用的函數(shù) xx:xx
     getImageurl:getImageurl
 }

要調(diào)用的js文件：

// 獲得工具utils工具js里面函數(shù),先模塊化引用utils里面的js地址  reqiure('js地址')成一個面向?qū)ο?var utils=require('../../utils/app.js')
// console.log(utils) 可查看獲得的函數(shù)
console.log(utils.getImageurl('iamgeaaddress.png'))

11.后臺交互/wx.request({})方法/渲染頁面方法 解析

小程序的后臺獲取數(shù)據(jù)方式get/post具體函數(shù)格式如下：wx.request({})

data: {
    logs:[]
  },
onLoad:function(){
this.getdata();
}
getdata:function(){//定義函數(shù)名稱
var that=this;   // 這個地方非常重要镣衡，重置data{}里數(shù)據(jù)時候setData方法的this應(yīng)為以及函數(shù)的this, 如果在下方的sucess直接寫this就變成了wx.request()的this了
    wx.request({
      url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//請求地址
      data:{//發(fā)送給后臺的數(shù)據(jù)
        name:"bella",
        age:20
      },
      header:{//請求頭
        "Content-Type":"applciation/json"
      },
      method:"GET",//get為默認方法/POST
      success:function(res){
        console.log(res.data);//res.data相當(dāng)于ajax里面的data,為后臺返回的數(shù)據(jù)
　　　　　　that.setData({//如果在sucess直接寫this就變成了wx.request()的this了.必須為getdata函數(shù)的this,不然無法重置調(diào)用函數(shù)
　　　　　　logs:res.data.result
　　　　　　　　　　})
      },
      fail:function(err){},//請求失敗
      complete:function(){}//請求完成后執(zhí)行的函數(shù)
    })
  },

wxml頁面：

<view  wx:for="{{logs}}" wx:for-item="value">
  {{value.catname}}
</view>

12.scroll-view用法

如果屏幕中某元素的內(nèi)容超過此元素的高度，可設(shè)置元素為scroll-view 為滾動狀態(tài)元素档悠，這樣可以做到元素固定高度且元素內(nèi)容滾動屏幕不滾動的效果廊鸥；

scroll-view標簽的主要屬性分為以下幾種：

scroll-x/y='true/false'----允許橫向/縱向滾動 
scroll-top/left='50'--設(shè)置滾動條出現(xiàn)的位置 
bindscroll='' 滾動中觸發(fā)的函數(shù) event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 
bindscrolltoupper='scrolltoupper' 滾動到頂部/左邊出發(fā)的函數(shù)scrolltoupper 
bindscrolltolower='scrolltolower' 滾動到底部/右邊出發(fā)的函數(shù)scrolltolower 
upper-threshold='50' 距離頂部/左邊多遠時觸發(fā)scrolltoupper函數(shù) 
lower-threshold='50' 距離底部/右邊多遠時觸發(fā)scrolltolower 函數(shù) 
scroll-into-view=‘id名字.這個是用來設(shè)置此元素的某個子元素出現(xiàn)在最上方，id的名字為此子元素的id

13.廣告輪播

微信小程序廣告輪播元素 圖片所在元素/swiper-item>
其中屬性有：

   autoplay:true,//是否自動播放
   autoplaytxt:"停止自動播放",
   indicatorDots: true,//指示點
   // indicator-color："white",//指示點顏色 暫未啟動
   // indicator-active-color："red",//當(dāng)前選中的指示點顏色暫未啟動
   indicatorDotstxt:"隱藏指示燈",
   interval: 1000,//圖片切換間隔時間
   duration: 500,//每個圖片滑動速度,
   circular:true,//是否采用銜接滑動
   current:3,//初始化時第一個顯示的圖片 下標值（從0）index

圖片更改事件：bindchange='imgchange' imagechange()的e.detail.current為當(dāng)前顯示頁面的下標值

wxml:

<swiper bindchange="imgchange" indicatorDots='{{indicatorDots}}' current='{{current}}' autoplay='{{autoplay}}' interval='{{interval}}'duration='{{duration}}' circular='{{circular}}'>
    <block wx:for='{{imgUrls}}'>
    <swiper-item>
        <image style="" mode="" src="{{item}}" binderror="" bindload="" class='swiper-img'></image>
    </swiper-item>
    </block>
</swiper>
<button  bindtap="autoplaychange" >{{autoplaytxt}}</button>

wxjs:

Page({
  data: {
    imgUrls: [
      '../../img/3.jpg',//圖片src
      '../../img/6.jpg',
      '../../img/5.jpg',
      '../../img/4.jpg'
    ],
    autoplay:true,//是否自動播放
    autoplaytxt:"停止自動播放",
    indicatorDots: true,//指示點
    // indicator-color："white",//指示點顏色 暫未啟動
    // indicator-active-color："red",//當(dāng)前選中的指示點顏色暫未啟動
    indicatorDotstxt:"隱藏指示燈",
    interval: 1000,//圖片切換間隔時間
    duration: 500,//每個圖片滑動速度,
    circular:true,//是否采用銜接滑動
    current:3,//初始化時第一個顯示的圖片 下標值（從0）index
  },
  autoplaychange:function(event){//停止辖所、播放按鈕
    if (this.data.autoplaytxt=="停止自動播放") {
      this.setData({
        autoplaytxt:"開始自動播放",
        autoplay:!this.data.autoplay
      })
    }else{
       this.setData({
        autoplaytxt:"停止自動播放",
        autoplay:!this.data.autoplay
      })
    };
  },
  imgchange:function(e){//監(jiān)聽圖片改變函數(shù)
console.log(e.detail.current)//獲取當(dāng)前顯示圖片的下標值
  }
})

wxss:　　

.swiper-img{
    width: 100%;
    height: 500rpx;
}

14.提示框

<!-- 提示view -->
  <loading hidden="{{loadingHidden}}">提交中...</loading>
  <modal bindconfirm="onTipsConfirm" hidden="{{hiddenTips}}" no-cancel>{{tipsContent}}</modal>
  <toast hidden="{{hideCommitSuccessToast}}">提交成功</toast>
// 提示框參數(shù)
    hiddenTips: true,
    tipsContent: '',
    loadingHidden: true,
    hiddenCommitTips: true,
    hideCommitSuccessToast: true,
  // 提示框
  onTipsConfirm: function (e) {
    this.setData({
      hiddenTips: true,
      tipsContent: ''
    })
  },
if (!name) {
        this.setData({
          hiddenTips: false,
          tipsContent: '請?zhí)顚懩男彰?
        })
        return;
      }
第二種方式：
// 提交成功
              this.setData({
                loadingHidden: true,
                hideCommitSuccessToast: false
              })
              // 定時惰说，3秒消化
              setTimeout(() => {
                this.setData({
                  hideCommitSuccessToast: true
                })
              }, 3000)

15.數(shù)據(jù)緩存

onLoad: function () {
    var that = this
    var brands = wx.getStorageSync('brands');// 從微信緩存中獲取數(shù)據(jù)
    if(brands){
      //  console.log("從微信緩存中獲取品牌數(shù)據(jù)");
       that.setData({
            brandsMap: brands
       })
    }else{
      //  console.log("從接口獲取品牌數(shù)據(jù)");
       //獲取接口品牌數(shù)據(jù)
        wx.request({
          url: userCarUtil.host + userCarUtil.getBrand_second,
          success: function (res) {
            wx.setStorageSync('brands',res.data);// 將數(shù)據(jù)放入微信緩存
            that.setData({
              brandsMap: res.data
            })
          }
        })
    }
  }