前端技術前沿10

容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。node

image.png

經過 npm 命令來升級git

$ sudo npm install npm -g
若是是 Window 系統使用如下命令便可:

npm install npm -g

全局安裝與本地安裝github

npm install express       # 本地安裝
npm install express -g   # 全局安裝

若是出現如下錯誤:web

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解決辦法爲:數據庫

$ npm config set proxy null

wx.showToastexpress

icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear。npm

image.png

wx.showToast({title: '加載中', icon: 'loading', duration: 10000});
wx.hideToast();
wx.showLoading({title: ‘加載中…’})
wx.hideLoading()

wx.showToast(Object object)
顯示消息提示框json

| title | string |  | 是 | 提示的內容 |  |
| icon | string | 'success' | 否 | 圖標 |  |
| image | string |  | 否 | 自定義圖標的本地路徑,image 的優先級高於 icon | 
| duration | number | 1500 | 否 | 提示的延遲時間 |  |
| mask | boolean | false | 否 | 是否顯示透明蒙層,防止觸摸穿透 |  |
| success | function |  | 否 | 接口調用成功的回調函數 |  |
| fail | function |  | 否 | 接口調用失敗的回調函數 |  |
| complete | function |  | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |

示例代碼小程序

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

什麼是node.js框架,爲何要選擇node.js框架進行服務器端的開發,使用node.js框架可以解決什麼問題,node.js框架適用於開發哪些應用程序,如何下載以及使用node.js框架,Node.js框架的主要特性,使用Node.js框架要了解基礎知識。微信小程序

模塊的做用,如何使用模塊,模塊中的各對象,屬性,方法以及事件。

node.js框架進行web服務端的開發,使用express框架開發web應用程序,如何使用socket.io類庫實現websocket通訊。

若是使用node.js和socket.io類庫製做一個聊天室應用程序的服務器端以及客戶端,如何使用node.js與express框架製做一個web應用程序的服務器端以及客戶端。

node.js基礎知識,node.js中的交互運行環境-repl
在Node.js中操做文件系統,使用buffer類處理二進制數據,實現tcp與udp的數據通訊,建立http與https服務器以及客戶端,進程與子進程,加密與壓縮,node.js中模塊,數據庫訪問,使用express構建web應用程序,使用socket.io類型實現websocket通訊。

微信小程序 wepyjs 第三方toast組件
官方toast組件只支持顯示success,loading兩種icon。

安裝組件

npm install wepy-com-toast --save

引入組件

// index.wpy
<template>
  <button @tap="toast" size="mini">第三方組件</button>
</template>
<script>
    import wepy from 'wepy';
    import Toast from 'wepy-com-toast';

    export default class Index extends wepy.page {
        components = {
            toast: Toast
        };
    }
</script>

調用方法

methods = {
  toast () {
    let promise = this.$invoke('toast', 'show', {
        title: '自定義標題',
        img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png',
    });

    promise.then((d) => {
        console.log('toast done');
    });
  }
}

微信小程序獲取用戶信息

客戶端調用wx.login,返回數據包含了js_code,用於獲取(用戶惟一標識)和(會話密鑰)

拿到js_code後,將其發送給服務端,服務端拿它與微信服務端作交互獲取openid和sessionkey

image

獲取手機號
獲取微信用戶綁定的手機號
由於須要用戶主動觸發才能發起獲取手機號接口,因此該功能不禁 API 來調用,需用 <button>組件的點擊來觸發。

使用方法

須要將 <button>組件 open-type 的值設置爲 getPhoneNumber,當用戶點擊並贊成以後,能夠經過 bindgetphonenumber 事件回調獲取到微信服務器返回的加密數據, 而後在第三方服務端結合 session_key 以及 app_id 進行解密獲取手機號。

代碼示例

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Page({
  getPhoneNumber(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }
})

獲取獲得的開放數據爲如下 json 結構:

{
  "phoneNumber": "13580006666",
  "purePhoneNumber": "13580006666",
  "countryCode": "86",
  "watermark": {
    "appid": "APPID",
    "timestamp": TIMESTAMP
  }
}
參數	類型	說明
phoneNumber	String	用戶綁定的手機號(國外手機號會有區號)
purePhoneNumber	String	沒有區號的手機號
countryCode	String	區號

微信小程序發送模版消息
image.png

兩個步驟:

image

//獲取access_token
  getAccess_token(){
    var that = this;
    var appId = 'wx******51';
    var secret = '36********261';
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appId + '&secret=' + secret,
      data: {},
      header: {
        'content-type': 'json'
      },
      success: function (res) {
        console.log("access_token"+res)
        that.setData({
          access_token: res.data.access_token
        })
      },
      fail:function(res){
        console.log("失敗"+res)
      }
    })
  },
獲取openid
// 登陸
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
        if (res.code) {
          var code = res.code; //返回code
          var appId = 'wxbd2******51';
        var secret = '3666********012d621261';
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
            data: {},
            header: {
              'content-type': 'json'
            },
            success: function (res) {
              var openid = res.data.openid //返回openid
              that.globalData.openid = openid
            }
          })
        }
      }
    })

請點贊!由於你的鼓勵是我寫做的最大動力!

官方微信公衆號

吹逼交流羣:711613774

吹逼交流羣

相關文章
相關標籤/搜索