微信小程序

時間 2019-11-17

標籤微信程序简体版

原文原文鏈接

mpVue wepyjavascript

人在屋檐下，不得不低頭css

0.html

catchtap防止冒泡前端

0.vue

①.input組件的屬性bindinput爲小程序雙向綁定（vue則爲v-model）java

①.onshow(從二級頁面回來加載)，onread、onready(從二級頁面回來不加載) (第一次進入頁面：onload、onshow、onready)linux

②.onHide() 頁面隱藏/切入後臺時觸發。ios

　　官方：如 navigateTo 或底部 tab 切換到其餘頁面，小程序切入後臺等。git

測試：點小程序右上角膠囊按鈕的圓圈，退出小程序；navigateTo,switchTabgithub

③.onUnload()頁面卸載時觸發。

　　官方：如redirectTo或navigateBack到其餘頁面時。

　　測試：官方自帶的返回上層按鈕。

　④.

　　　　"tabBar"頁面，跳轉的其餘頁面是不關閉本頁面的(第二次進入tabBar頁面時，只執行onshow);

　　　　官方自帶返回上一層是關閉本頁面的(再次進入本層時，又從新開始執行onload - onshow - onready);

⑤.

　　globalData爲內存。storage爲緩存。即小程序退出globalData會清空，storage則不會。

　　關閉微信或退出小程序過久時(至關於刪了小程序從新搜索，但不清除緩存) == 開發工具中的ctrl + s

　　關閉微信或退出小程序過久時：小程序的會被回收，以前只是隱藏的頁面(onHide), onload會再次執行；

關閉微信或退出小程序過久時：data和globalData的值會初始化

CSS元素組件的清默認效果

button { margin: 0; padding: 0; line-height: normal; text-align: left; background: transparent; border-radius: 0; box-sizing: content-box; }

button::after { border: 0; }

input { min-height: 0; height: 0; }

cover-view { line-height: 0/normal; overflow: visible; pointer-events; }

盒子是w3c標準盒子 =》寬高等於寬高，但button 爲IE盒子

超小屏幕手機 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面顯示器 (≥992px)	大屏幕大桌面顯示器 (≥1200px)

iphone5/6/7　　頂部導航64px = 128rpx ( 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。width=750rpx)

①wx的運行環境

IOS的webkit（蘋果開源的瀏覽器內核）

Android的X5（QQ瀏覽器內核）

開發工具nw.js（C++實現的web轉桌面應用）

②爲何wx不直接運行在瀏覽器（webview）中，而要繞過瀏覽器直接調用內核呢？

　　由於運行在瀏覽器中的webapp是作不了監控的，而wx的表現是半native app，半web app,而native app與web app和一個很重要的區別就是native app 有本身的生命週期。

movable-view　　iphone控制點

swiper　　　　　　輪播圖

scroll-view　　　　scroll

　　1.scroll-view 中的須要滑動的元素不能夠用 float 浮動；

　　2.scroll-view 中的包裹須要滑動的元素的大盒子用 display:flex; 是沒有做用的；

　　3.scroll-view 中的須要滑動的元素要用 dislay:inline-block; 進行元素的橫向編排；

　　4.包裹 scroll-view 的大盒子有明確的寬和加上樣式--> overflow:hidden;white-space:nowrap;

6.兼容小辮子屏幕

wx.getSystemInfo({

　　success: function (res) {

　　　　res.model == 'iPhoneX' || res.model == 'MI8'

　　}

})

@@media screen and (min-height: 800px)

7.對應的服務器 TLS 爲 TLS 1.0 ，小程序要求的 TLS 版本必須大於等於 1.2 。控制檯輸入 showRequestInfo() 能夠獲取更詳細信息。

https://www.linuxidc.com/Linux/2017-04/142744.htm

https://blog.csdn.net/ghlfllz/article/details/72832436

https://blog.csdn.net/ruoshuiyx/article/details/80597503

https://blog.csdn.net/kirawoo/article/details/78737242

HISTORY

內測時間 2016年9月21日

發佈時間 2017年1月9日

小遊戲 2017年12月28日，微信更新的 6.6.1 版本開放了

請勿在 scroll-view中使用textarea、map、canvas、video組件

wx.navigateBack()當delta的值小於等於0時，都說放回上一層。(小程序基礎庫2.6.0)

10.小程序阻止遮罩層下的頁面滾動

彈出框根元素樣式：position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;

彈出框根元素事件：catchtouchmove="空的事件" （catchtouchmove="nullEvent" nullEvent (res) {}）

11.小程序關閉本身

<navigator target="miniProgram" open-type="exit"></navigator> (exit退出小程序，需targer="miniProgram"爲前提)

12.template和組件

<!-- template -->
<template name="msgItem">
  <view>
    <text>Name: {{username}}</text>
    <text>Age: {{age}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

view text {
  display: block;
}



<!-- tReal -->
<import src="/demo/template/template.wxml" />
<template is="msgItem" data="{{...tData}}" />

data: {
  tData: {
    username: 'haha!',
    age: 18,
    time: '2019/2/19'
  }
}

@import "/demo/template/template.wxss";

<!-- components -->
json
{
  "component": true,
  "usingComponents": {}
}

html
<view class="wrapper">
  <view>這裏是組件的內部節點</view>
  <slot></slot>
</view>

css
.wrapper {
  background: #ddd;
}

js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    myName: {
      type: String,
      value: '張兮兮'
    },
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})



<!-- cReal -->
json
{
  "usingComponents": {
    "my-component": "/components/component-tag-name"
  }
}

html
<view>
  <my-component my-name="二哈">
    <!-- 這部份內容(下面的view)將被放置在組件 <slot> 的位置上 -->
     <view>這裏是插入到組件slot中的內容</view> 
  </my-component>
</view>

13.減小setData:

①、canvas代替setData,
②、數據不用展現時，不使用setData,用this.data.xx代

14.scroll-view

<scroll-view scroll-x="true">才能滾動

scroll-y須要給定高度

14.解決微信小程序ios端滾動卡頓的問題

方法1：scroll-view組件且設置高度；方法2:overflow:auto; -webkit-overflow-scrolling: touch;

14.textarea的placeholder-style在開發工具備時沒效果，真機能夠，因此文檔支持開發工具沒效果，可看真機

WEPY框架

①、wpy文件中的script、template、style這三個標籤都支持lang和src屬性
②、（config、components、data、methods、events、其餘函數）
import wepy from 'wepy';
// 聲明一個App小程序實例
export default class MyAPP extends wepy.app {
}
// 聲明一個Page頁面實例
export default class IndexPage extends wepy.page {
}
// 聲明一個Component組件實例
export default class MyComponent extends wepy.component {
}
③、this.$parent =》 getApp()
④、WePY中的methods屬性只能聲明頁面wxml標籤的bind、catch事件，不能聲明自定義方法，這與Vue中的用法是不一致的。

功能實現

#0.在開發工具中不執行的函數

wx.getSystemInfo({
    success: function (res) { 
　　　　　// 當設備爲'devtools',則開發工具
        if (!(res.brand == 'devtools')) {
            if (wx.getStorageSync('itude') || that.data.isAuthor) {
                that.cloudW();
            }
        }
        
    }
})

#1.登陸受權

①. openid

獲取openid：wx.login()的code換openid
前端：
wx.login() => code
後端：
https://api.weixin.qq.com/sns/jscode2session
參數：appid、secret、js_code、grant_type(小程序appid、小程序secret、wx.login()獲取code、'authorization_code')
返回：openid、session_key、unionid、errcode、errmsg

View Code

此方法前端不可用，只作測試
(api.weixion.qq.com出於安全考慮不能前端調用，合法域名添加不了)
wx.login({
  success (e) {
    console.log(e)
    let code = e.code;
    wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
        appid: 'wx1f5ba1aea54dd9ac',
        secret: 'de3eb7f145293628adce72b2ee2289b7',
        js_code: code,
        grant_type: 'authorization_code'
      },
      success(res) {
        let openid = res.data.openid
        console.log(openid)
      }
    })
  }
})

View Code

②.用戶信息

用戶直接受權 => 獲取用戶信息

用戶拒絕受權 => 提示用戶受權，開啓wx.openSetting受權界面，開啓後獲取用戶信息

<button open-type="getUserInfo" bindgetuserinfo='userInfo'>點擊受權登陸</button>
userInfo (res) {
  // 沒有直接受權
  if (!res.detail.userInfo) {
    // 提示要受權，用戶贊成，開啓wx.openSetting()
    wx.showModal({
      title: '提示',
      content: '不受權信息還在玩耍，受權吧',
      success(res) {
        if (res.confirm) {
          console.log('用戶點擊肯定')
          wx.openSetting({
            success (res) {
              wx.getUserInfo({
                success (res) {
                  console.log(res)
                  // 間接受權，用戶基本信息
                  let userInfo = res.userInfo
                  console.log(userInfo)
                }
              })
            },
            fail (res) {
              console.log(res)
            }
          })
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      }
    })
    return;
  }
  // 直接受權,獲取用戶基本信息
  let userInfo = res.detail.userInfo;
  console.log(userInfo)
},

View Code

（受權時這些encryptedData、iv、rawData、signature、errMsg是要後端解密出來的加密信息，能夠拿到openid、unionid、appid）

wx.getUserInfo()只有受權過才能調用

wx.openSetting使用受權，不能直接調用官方推薦 ①.組件的open-type="openSetting" ②.點擊行爲觸發<button bindtap="openSetting">

#2.小程序模板消息接口(後端操做——前端不能直接訪問https://api.weixin.qq.com)
①.去小程序建立模板，拿到模板id(功能->模板庫：建立成功後，在功能->個人模板,查看id)
②.獲取token
https://api.weixin.qq.com/cgi-bin/token (get)
參數：
grant_type: 'client_credential',
appid: 'wx1f5ba1aea54dd9ac',
secret: 'de3eb7f145293628adce72b2ee2289b7'
返回：token
③.發送模板
https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send (post)
參數
jsonData = {
access_token: token, // ②獲取的token
touser: 用戶openid, // 用戶openid
template_id: 模板id, // 小程序建立的模板id
form_id: e.detail.formId, // (用戶自動點擊按鈕id,線上或真機才能獲取)
page: "pages/index/index", // 用戶收到推送後，點推送信息跳到小程序的頁面
data: { // 推送的信息（小程序建立的模板裏設置格式）
"keyword1": { "value": "測試數據一", "color": "#F00" },
"keyword2": { "value": "測試數據二", "color": "#0F0" },
"keyword3": { "value": "測試數據三", "color": "#00F" },
"keyword4": { "value": "測試數據四", "color": "#0FF" },
}
}

(發送失敗緣由之一form_id：用戶自動點擊按鈕id只能使用一次；用戶自動點擊按鈕id在7天后失效
https://blog.csdn.net/huningjun/article/details/79192759)

#3.小程序跳轉公衆號
①.小程序和公衆號同一主體（認證的公司或我的信息相同，可在設置->基本設置查看）
②.official-account
③.公衆號要求小程序關聯
④.小程序要開啓「公衆號關注組件」(設置->關注公衆號)

#4.小程序跳轉小程序(跳轉以前有彈框，用戶是否跳轉)

①.代碼

function goToNewProject () {

  wx.navigateToMiniProgram({
    appId: '',
    path: 'pages/index/index?id=123',
    extraData: {},
    envVersion: 'release/develop',
    success(res) {
      // 打開成功
      console.log(res)     
    }
  })
}

②.需在全局app.json添加跳轉小程序的appid，才能審覈

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "皮膚測試",
    "navigationBarTextStyle": "black"
  },
  "navigateToMiniProgramAppIdList": ["wx1f5ba1aea54dd9ac"],

#5.訪問攝像頭受權

wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.camera']) {
          wx.authorize({
            scope: 'scope.camera',
            success() {
              that.setData({
                isTextt: false
              })
              wx.navigateTo({
                url: '../subPage/photo/photo?route=/' + that.route,
              })
            },
            fail() {
              wx.showModal({
                content: '此功能須要受權攝像頭',
                success() {
                  wx.openSetting({
                    success(res) {

                    }
                  })
                }
              })
            }
          })
        } else {
          that.setData({
            isTextt: false
          })
          wx.navigateTo({
            url: '../subPage/photo/photo?route=/' + that.route,
          })
        }
      }
    })

1.買域名
2.域名備案，加白名單（線下）
3.網上加白名單(線上)
4.域名與ipA記錄



小程序跳公衆號文章或公衆號
1.公衆號邀請小程序關聯(小程序appid)
2.小程序最高管理者在手機上確認便可





official-account
1.設置的公衆號需與小程序主體一致。

2.限制
當小程序從掃 二維碼場/小程序碼 景（場景值1011/場景值1047）打開時
當小程序從聊天頂部場景（場景值1089）中的「最近使用」內打開時，若小程序以前未被銷燬，則該組件保持上一次打開小程序時的狀態
當從其餘小程序返回小程序（場景值1038）時，若小程序以前未被銷燬，則該組件保持上一次打開小程序時的狀態

3.組件大小（最小寬度爲300px，高度爲定值84px。）
4.
公衆號可關聯
同主體的10個小程序
不一樣主體的3個小程序
同一個小程序可關聯最多500個公衆號

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
style

css初始化

page {
  font-size: 24rpx;
}
button { margin: 0; padding: 0; line-height: normal; background: transparent; border-radius: 0; box-sizing: content-box; }
button::after { border: 0; }