tabber配置

  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black" ,
    "list": [
        {
        "selectedIconPath": "icon/home-o.png",
        "iconPath": "icon/home.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "selectedIconPath": "icon/category-o.png",
        "iconPath": "icon/category.png",
        "pagePath": "pages/category/category",
        "text": "一元投"
      }
    ]
  },

運算

運算符 => 表達式
1.可以在花括號里面加入表達式語句
2.表達式
指的是一些簡單的 數(shù)組運算 字符串拼接 邏輯運算
1. 數(shù)字的加減
2. 字符串拼接
3. 三元表達式

<view>{{ 1 + 1}}</view>
<view>{{ 1 + '2'}}</view>
<view>{{ 10 % 2 === 0 ? '偶數(shù)' : '基數(shù)'}}</view>
<view>{{ false || 1 }}</view>
<view>{{ true || 1 }}</view>
<view>{{ true && 1 }}</view>

循環(huán)

<!-- wx:for循環(huán) -->
<!-- 
  1.wx:for='{{數(shù)組或者對象}}' wx:for-item="循環(huán)的名稱" wx:for-index="循環(huán)的索引"
  2.wx:key="唯一的值" 用來提高性能
    1. wx:key 綁定一個普通的字符串的時候 那么這個字符串名稱 肯定是數(shù)組中的對象的唯一屬性
    2. wx:key = "*this" 這種表示循環(huán)一個數(shù)組的時候用這個
  3. 當出現(xiàn)循環(huán)嵌套時候 要注意綁定名稱不要重復

-->
<view 
wx:for="{{list}}" 
wx:for-item="item" 
wx:for-index="index" 
wx:key="id">
  {{index}} - {{item.name}}
</view>

<!-- 
    默認情況下 我們不寫
      wx:for="{{list}}" 
      wx:for-item="item" 
      wx:for-index="index" 

      item 和 index 也是生效的
      只有一層的話 wx:for-item="item" wx:for-index="index" 可以省略
-->

<view wx:for="{{list}}" wx:key='*this'>{{item.name}}</view>

<!--  
  對象循環(huán)
  1.wx:for='{{對象}}' wx:for-item="對象的值" wx:for-index="對象的屬性"
  2. 循環(huán)對象的時候 最好把item 和 index 的名稱改一下
      wx-for-item = 'value' wx:for-index = 'key'
  -->
  <view wx:for="{{obj}}" wx:for-item="value" wx:for-index='key'>
    {{key}} - {{value}}
  </view>

blck

1. 占位符
2. 寫代碼的時候 可以看到整個標簽的存在
3. 頁面的渲染小程序會把他移除掉

條件渲染

    條件渲染
    1. wx:if="{{true / false}}"
       wx:if
       wx:elif
       wx:else
    2. hidden
       在標簽上直接加入屬性hidden
       hidden="{{true}}"
    3. 什么場景使用哪個
      1. 當標簽不是頻繁切換顯示 優(yōu)先使用 wx:if (直接把標簽從頁面中移除掉)
      2. 當標簽頻繁切換顯示 優(yōu)先使用 hidden (通過添加樣式方法來切換顯示)    

事件綁定

  1. 需要給input標簽綁定 input事件
     綁定關鍵字 bindinput 
  2. 如果獲取輸入框的值
     通過事件源對象來獲取
     e.detail.value
  3. 把輸入框的值賦值給data當中
     不能直接用vue中的方法
     this.num = e.detail.value
     正確寫法
     this.setData({
       num: e.detail.value
     })
     在js中拿到data的值
     this.data.num
  4. 點擊事件 bindtap
     1. 無法在小程序中直接通過函數(shù)傳參 bindtap='readletap(1)'
     2. 通過自定義屬性傳遞參數(shù) data-num='{{1}}' js中通過e.currentTarget.dataset.num

wxml

<input type="text" value="{{num}}" bindinput="gbInput" />
<button size="mini" bindtap='readletap' data-num='{{1}}'>+</button>
<button size="mini" bindtap='readletap' data-num='{{-1}}'>-</button>
<view>{{num}}</view>

js

// pages/demo1/demo1.js
Page({
  data: {
    num: 0
  },
  gbInput(e) {
    this.setData({
      num: parseInt(e.detail.value)
    })
  },
  readletap(e) {
    this.setData({
      num: e.currentTarget.dataset.num + this.data.num
    })
  }
})

尺寸單位

rpx 可以根據(jù)屏幕進行自適應慨代，規(guī)定屏幕為750rpx羡铲。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375rpx物理像素，1rpx = 0.5px = 1物理像素吹截。
設備 rpx換算px (屏幕寬度/750) px換算rpx (750/屏幕寬度)

image.png

建議： 開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。
注意： 在較小的屏幕上不可避免的會有一些毛刺凝危，請在開發(fā)時盡量避免這種情況刺彩。

需要把頁面中的某些元素的單位 由 px 改成prx

1 設計稿 750 px
    750 px = 750 rpx
    1 px = 1 rpx
2 把屏幕高度改成 375
    375 px = 750 rpx
    1 px = 2rpx
    1rpx = 0.5px
3 如果存在一個設計稿 寬度 414 或者 未知 page
   1 設計稿 page 存在一個元素 寬度 100px
   2 拿以上的需求 去實現(xiàn) 不同寬度的頁面適配

    page px = 750rpx
    1 px = 750rpx / page
    100 px = 750 rpx * 100 / page

樣式導入

通過@ import 來引入
路徑只能寫相對路徑

@ import “../../styles/common.wxss”;

選擇器和使用less

小程序不知此通配符 *{}

image.png

常見標簽

常用 view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox。 等等

text

text的decode可以解析的有   < > & '    

image

   image 圖片標簽
   1 src 指定要加載的圖片路徑
     圖片存在默認的寬度和高度 320 * 240 不設置寬高弃锐，就會默認320 * 240
   2 mode 決定 圖片內(nèi)容 如何 和 圖片標簽 寬高 適配 列舉一些常用的
      1. scaleToFill 默認值 不保持叢橫比縮放圖片瑰排，使用圖片的寬高完全拉伸填滿 image 元素
      2 aspectFit 保持寬高比 確保圖片的長邊 顯示出來 適合頁面輪播圖 （常用）   
      3 aspectFill 保持縱橫比縮放圖片， 只保證圖片的 短 邊能完全顯示出來支鸡。 （少用）
      4 widthFix 以前web圖片的 寬度指定后 高度會自己安裝比例來調(diào)整 （常用）
      5 bottom冬念。。 類似以前的background-position
   3. 小程序中的image 直接支持 懶加載 lazy-load
      1. lazy-load會自己判斷 當 圖片 出現(xiàn)在視口 上下 三屏的時候 自己開始加載圖片

Swiper

    swiper 標簽 存在默認樣式
      width：100%
      height: 150px image 存在默認寬度和高度 320 * 240
      swiper高度無法實現(xiàn)由內(nèi)容撐開
    先找出 原圖的寬度和高度 等比例 給swiper 定 寬度和高度
      原圖的寬度和高度 750 * 310
      swiper 寬度 / swiper 寬度 = 原圖的寬度 / 原圖的高度
      swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度
      height：
       * 310 / 750  
      窗口固定寬度為100vw牧挣，將窗口寬度平均分為100份急前，每一份是1vw。
      窗口固定高度為100vh瀑构，將窗口高度平均分為100份裆针，每一份是1vh。

<swiper>
  <swiper-item>
    <image mode="widthFix" src="http://pic50.t8tcdn.com/adcms/ad/201909/25/c8cad7f58fd875d5d3ef020f11c7886d6696.jpg" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="http://pic50.t8tcdn.com/adcms/ad/202001/17/938f8f2dbb8e1c30bd47cda9ca65f5cb83269.jpg" />
  </swiper-item>
</swiper>

wxss

swiper{
  width: 100%;
  /* height: calc(750rpx * 310 / 750); */
  height: calc(100vw * 310 / 750);
  /*height: 圖片的高度也可以*/
}
image {
  width: 100%;
}

navigator

  導航組件 navigator
  塊級元素 默認會換行 可以直接加寬度高度
  1 參數(shù) url 要跳轉的頁面路徑 可以絕對路徑 相對路徑
  2 參數(shù) target 要跳轉到當前的小程序 還是其他的小程序
    target = 'self' 默認值 自己小程序頁面
    miniprogram 其他小程序頁面
  3 open-type 跳轉方式 
    1 navigator 默認值 保留當前頁面，跳轉到應用內(nèi)的某個頁面世吨，但不能跳到tabbar頁面
    2 redirect 關閉當前頁面澡刹，跳轉到應用內(nèi)的某個頁面，但不允許跳轉tabber
    3 switchTab 跳轉到 tabber 頁面耘婚，并關閉所有非 tabBer 頁面
    4 reLaunch 關閉所有頁面 打開到應用中

 
 <!-- navigator 默認值 跳轉到pages/demo/demo 頂部顯示可以返回箭頭 可返回當前頁面 -->
<navigator url="/pages/demo/demo">跳轉</navigator>
<!-- redirect 跳轉到pages/demo/demo 頂部左上角顯示返回首頁 關閉當前頁面 不能返回當前頁面 -->
<navigator url="/pages/demo/demo" open-type="redirect">跳轉</navigator>
<!-- 跳轉到 tabber 頁面罢浇，不能返回非tabber的頁面 -->
<navigator open-type="switchTab" url="/pages/index/index"></navigator>
<!-- reLaunch 可以隨便跳轉哪個頁面 左上角返回首頁 關閉當前頁面 -->
<navigator open-type="reLaunch" url="/pages/demo/demo">reLaunch 跳轉</navigator>

rich-text 富文本標簽

可以解決服務端傳過來的富文本編輯的文章
wxml

<rich-text nodes="{{html}}"></rich-text>

js

// pages/demo3/demo3.js
Page({
  data: {
    html: '<div style="color: red">哈哈哈</div>'
  },
})

button外觀樣式

  button
  外觀的屬性
    1 size 控制按鈕的大小 默認是大尺寸
      sizr='mini' 小尺寸
    2 type 用來控制按鈕的顏色
      type='default' 灰色
      type='primary' 綠色
      type='warn' 紅色  
    3 plain 鏤空  
    4 loading 在按鈕前面會有一個loading

<button size='mini'>按鈕</button>
<button>default按鈕</button>
<button type='primary'>primary按鈕</button>
<button type='warn'>warn按鈕</button>
<button type='warn' plain>plain按鈕</button>
<button type='primary' loading>loading</button>

button 開放能力

 button
   open-type:
    1 contact 直接打開 客服對話功能 需要在微信小程序的后臺配置
    2 share 轉發(fā)當前的小程序 到微信朋友中 不能把小程序 分享到朋友圈
    3 getPhoneNumber 獲取當前用戶手機號碼信息 結合一個事件來使用 不是企業(yè)的小程序賬號 沒有權限來獲取用戶手機號碼
      1 綁定一個事件bindgetphonenumber
      2 在事件的回調(diào)函數(shù)中 通過參數(shù)來獲取信息
      3 獲取到的信息 已經(jīng)加密過了
        需要搭建小程序后臺，在后臺服務器中進行解析沐祷，然后再傳到小程序頁面中 就可以看到用戶的手機號碼了
    4 getUserInfo 獲取當前用戶的個人信息
      使用方法 類似 獲取當前用戶的手機號碼
      可以直接獲取 不存在加密的字段
      通過 回調(diào) bindgetuserinfo = 'getInfo'
      getInfo(e) {}
    5 launchApp 在小程序當前直接打開app 頁面
      需要 在app中 通過app的某個鏈接打開小程序
      在小程序中在通過這個功能重新打開app
    6 openSetting 打開小程序的內(nèi)置 授權頁面
      授權頁面中 只會出現(xiàn)用戶曾經(jīng)授權過的權限
    7 feedback 打開小程序 內(nèi)置的 用戶意見反饋頁面
      只能通過真機來打開

<button open-type='contact'>contact</button>
<button open-type='share'>share</button>
<button open-type='getPhoneNumber' bindgetphonenumber="getPhone">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getInfo">getUserInfo</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
<image src="{{userInfo.avatarUrl}}"></image>

icon

image.png

單選框

  radio 單選框
  1 radio標簽 必須和父元素 radio-group 來使用
  2 value 選中的單選框的值
  3 需要給radio-group 綁定bindchange事件
  4 需要在頁面中顯示選中的值
  5 color 改變單元框的顏色

  <radio-group bindchange='getGender'>
    <radio value='男' checked="{{true}}"  color='red'>男</radio>
    <radio value='女'>女</radio>
  </radio-group>
  <view>選中的信息：{{gender}}</view>

// pages/demo5/demo5.js
Page({
  data: {
    gender: '男',
    current: 0
  },
  getGender(e) {
    let gender = e.detail.value
    this.setData({
      gender
    })
  },
  nextFn() {
    let _this = this.data;
    if(_this.current === 2) {
      this.setData({
        current: 0
      })
    }else {
      this.setData({
        //前加加  先加在賦值
        current: ++ this.data.current
        //不起作用是因為 后加加 先賦值后加價
        // current: this.data.current++
      })
    }
  }
})

checkbox

<view>
  <checkbox-group bindchange='getValue'>
    <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
</view>

// pages/demo6/demo6.js
Page({
  data: {
    list: [
      {
        id: 1,
        name: '蘋果',
        value: 'apply'
      },
      {
        id: 2,
        name: '葡萄',
        value: 'grape'
      },
      {
        id: 3,
        name: '香蕉',
        value: 'banana'
      }
    ],
    checkList: []
  },
  getValue(e) {
    this.setData({
      checkList: e.detail.value
    })
    console.log(e);
  }
})

小程序自定義組件初體驗

第一步 創(chuàng)建components文件夾嚷闭，在components文件夾中建一個組件

image.png

第二步 在想用組件的地方，打開json修改 組件路徑

{
  "usingComponents": {
    "Tabs1": "../../components/Tabs/Tabs"
  }
}

第三步 在wxml 中使用

<Tabs1></Tabs1>

自定義組件-父向子傳遞數(shù)據(jù)

父組件wxml

<!--pages/demo1/demo1.wxml-->
<Tabs1 abc="abc123"></Tabs1>

子組件js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //要接受父組件的名稱戈轿，子組件直接用{{abc}} 即可
    abc: {
      type: String, //要接受的數(shù)據(jù)類型
      value: ' ' //默認值凌受，如果父組件不傳值，就以value值為準
    }
  },
})

子組件wxml

<view>
    //頁面上的值 就是 abc123
    {{abc}}  
</view>

父向子傳遞數(shù)據(jù)demo

父組件wxml

<Tabs1 tabs="{{tabs}}"></Tabs1>

父組件js

// pages/demo1/demo1.js
Page({
  data: {
    tabs: [
      {
        id: 1,
        name: '首頁',
        active: true
      },
      {
        id: 2,
        name: '原創(chuàng)',
        active: false
      },
      {
        id: 3,
        name: '分類',
        active: false
      },
      {
        id: 4,
        name: '關于',
        active: false
      }
    ]
  }
})

子組件js

// components/Tabs.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //要接受父組件的名稱思杯，子組件直接用{{abc}} 即可
    tabs: {
      type: Array, //要接受的數(shù)據(jù)類型
      value: [] //默認值胜蛉，如果父組件不傳值，就以value值為準
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    eventTabs(e) {
      let { index } = e.target.dataset;
      let { tabs } = this.data;
      //forEach 改變原數(shù)組
      tabs.forEach((v, i) => i === index ? v.active = true : v.active = false);
      this.setData({
        tabs
      })
    }
  }
})

子組件wxml

<view class="tabs">
    <view class="tabs_title">
        <!-- wx:for 循環(huán)默認 又 wx:for-item = 'item' 可以拿到循環(huán)的內(nèi)容  wx:for-index = "index" 可以拿到循環(huán)的索引      -->
        <view
                bindtap="eventTabs"
                wx:for="{{tabs}}"
                wx:key="id"
                data-index = '{{index}}'
                class="tabs-item {{item.active ? 'active' : ''}}">
            {{item.name}}
        </view>
    </view>
</view>

子元素向父元素傳遞數(shù)據(jù)

子向父傳遞數(shù)據(jù) 通過事件的方式傳遞
在子組件的標簽中加入一個自定義組件

• 子組件js

  methods: {
    eventTabs(e) {
      let { index } = e.target.dataset;
      //向父組件傳遞值
      // 觸發(fā)父組件中的自定義組件 同時傳遞數(shù)據(jù) 給 父組件
      // this.triggerEvent('父組件自定義的事件名稱', { 要傳遞的參數(shù) })
      this.triggerEvent('changeItem', { index });
    }
  }

• 父組件wxml

//bindchangeItem 是子組件自定義的事件
<Tabs1 tabs="{{tabs}}" bind:changeItem="handleItemChange"></Tabs1>

父組件js

  handleItemChange(e) {
    let { index } = e.detail;  // 1
    //上面代碼等價于
    //let index = e.detail.index
  }

slot 插槽

    slot 標簽 其實就是一個占位符 插槽
    等到 父組件 調(diào)用 子組件的時候 再傳遞 標簽過來 最終這些被傳遞的標簽
    就會替換slot插槽位置

子組件wxml

<view>
        <!--
            slot 標簽 其實就是一個占位符 插槽
            等到 父組件 調(diào)用 子組件的時候 再傳遞 標簽過來 最終這些被傳遞的標簽
            就會替換slot插槽位置
        -->
        <slot></slot>
</view>

父組件wxml

<Tabs1>
    父組件傳過來的值
</Tabs1>

組件的其他屬性

image.png

app.js 應用生命周期

App({
  // 應用第一次啟動的就會觸發(fā)的事件
  onLaunch() {
    // 在應用第一次啟動時候色乾， 獲取個人信息
    console.log('onLaunch');
  },
  // 應用 被用戶看見 觸發(fā)事件
  onShow() {
    // 對應用的數(shù)據(jù)或者頁面效果重置
    console.log('onShow');
  },
  // 應用隱藏 觸發(fā)事件
  onHide() {
    //暫吞懿幔或者清除定時器
    console.log('onHide');
  },
  // 應用的代碼發(fā)生報錯的時候 就觸發(fā)
  onError (err) {
    // 在應用發(fā)生代碼報錯的時候，收集用戶的錯誤信息暖璧。通過異步請求 將錯誤信息發(fā)送到后臺去
    console.log('onError');
  },
  // 頁面找不到j就會觸發(fā)
  // 應用第一次啟動的時候案怯，如果找不到第一個入口頁面 才會觸發(fā) 類似404頁面 找不到頁面 就跳到其他頁
  onPageNotFound() {
    console.log('onPageNotFound');
    wx.navigateTo({
      url: 'pages/demo1/demo1',
    })
  }
})

頁面生命周期

/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    //發(fā)送一些異步請求來初始化頁面數(shù)據(jù)
    console.log('onLoad');
  },


  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    console.log('onShow');
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    console.log('onReady');
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    console.log('onHide');
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載 就是跳轉鏈接 左上角沒有返回箭頭
   */
  onUnload: function () {
    console.log('onUnload');
  },

  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   * 要在app.json中配置
   * "enablePullDownRefresh": true,
     "backgroundColor": "#ccc",
      更新一些數(shù)據(jù)接口
   */
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   * 頁面上拉底部觸發(fā)事件
   * 需要讓頁面 上線上下滾動才行
   */
  onReachBottom: function () {
    console.log('onReachBottom');
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage');
  },

  /**
   * 只有頁面一滾動就會觸發(fā)
   * */
  onPageScroll() {
    console.log('onPageScroll');
  },
  /**
   * 當前是tab頁面時候，點擊tab觸發(fā)
   * */
  onTabitemTap() {

  }

request 網(wǎng)絡請求

image.png

GET

wx.request({
    url: 'con.theme_user',
    method: 'GET',
    data: {
        act: 'getUserInfo',
        wxappid: confirm.wyy_user_wxappid,
        openid: resizeBy.data.openid
    },
    header: {
        "Content-Type": "application/json"
    },
    success: (res) => {
        console.log(res.data);
        // 存放用戶基本信息
        this.setData({
            userInfo: res.data.userInfo,
            hasUserInfo: true,
            canIUse: true
        })
    }
})

wx.request({
    header: {
        "content-type": "application/json"
    },
    method: "POST",
    url: `${this.globalData.api}login/token`,
    data: {
        code: code
    },
    success: res => {
        var token = res.data.data
        console.log(token);
        wx.setStorageSync('token', token);
        // 設置完token之后獲取首頁數(shù)據(jù)
        // resolve()
    }
})