无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

一、首先從前端微信小程序開發(fā)說起

1.小程序前端代碼github地址：https://github.com/xml123/books

2.首先要在微信公眾平臺(tái)注冊開發(fā)者賬號(hào),申請個(gè)人開發(fā)者資質(zhì)，可以按照微信提供的文檔一步一步來，這里沒什么好說的

3.首先在微信公眾平臺(tái)，申請一個(gè)個(gè)人開發(fā)的小程序，獲得AppID（AppID比較重要，在接下來的很多地方都將用到），然后下載一個(gè)小程序開發(fā)工具，新建項(xiàng)目選擇小程序項(xiàng)目，選擇代碼存放的硬盤路徑，填入剛剛申請到的小程序的 AppID，給你的項(xiàng)目起一個(gè)好聽的名字，最后，勾選 "創(chuàng)建 QuickStart 項(xiàng)目" （注意: 你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng)），點(diǎn)擊確定，你就得到了你的第一個(gè)小程序了，點(diǎn)擊頂部菜單編譯就可以在微信開發(fā)者工具中預(yù)覽你的第一個(gè)小程序。

5.首先看app.json文件，這是小程序的總配置文件，可以配置小程序的頂部顏色，文字等等，可以配置底部的tabbar，配置路由等，在tabBar里配置底部tabbar,在pages數(shù)組里面配置頁面，如下

{
  "pages": [
    "pages/index/index",
    "pages/bookStore/bookStore",
    "pages/me/me",
    "pages/bookCity/bookCity",
    "pages/bookAbstract/bookAbstract",
    "pages/chapterDetail/chapterDetail",
    "pages/freeBooks/freeBooks"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "books",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#222222",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "發(fā)現(xiàn)",
        "iconPath": "images/find.png",
        "selectedIconPath": "images/find_select.png"
      },
      {
        "pagePath": "pages/bookCity/bookCity",
        "text": "書城",
        "iconPath": "images/books.png",
        "selectedIconPath": "images/books_select.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "images/me.png",
        "selectedIconPath": "images/me_select.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 60000
  }
}

pages數(shù)組里面的頁面需要自己在左側(cè)pages文件夾下新建目錄，然后在目錄里新建page,就會(huì)自動(dòng)生成路由和對應(yīng)的.js、.json、.wxml、.wxss等文件。

6.然后介紹一下app.js文件，該文件中主要是配置全局的變量和一些方法，每次小程序加載時(shí)，首先會(huì)加載該文件中的生命周期函數(shù)，可以在該文件中獲取授權(quán)或是獲取openid等等參數(shù)，以供全局使用。

App({
  onLaunch: function () {
    var that = this
    
    //登錄
    wx.login({
      success: res => {
        // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
        console.log('code',res.code)
        wx.request({
          url: that.globalData.url + '/api/get_auth',
          data: { 
            code: res.code
          },
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          success: function (res) {
            if(res.data.code == 200){
              wx.setStorageSync('openid', res.data.openid)
            }else{
              wx.showToast({
                title: '請求失敗，請稍后重試',
                icon: 'none',
                duration: 2000
              })
            }
            console.log(res.data)
          },
          fail: function (e) {
            console.log('網(wǎng)絡(luò)出錯(cuò)');
          }
        })
      }
    })
  },
  globalData: {
    //url:'https://api2.fang88.com',//正式環(huán)境
    // url:'https://apitest.fang88.com',//測試線上環(huán)境
    url: 'https://api.brightness.xin',
    urlImg: 'https://api.brightness.xin/static/image/',//圖片前綴
    // url: 'http://192.168.0.109:9000',//測試環(huán)境
    // urlImg: 'http://192.168.0.109:9000/static/image/',//圖片前綴
    // urlImgend:'?x-oss-process=style/pic_64x64'
    // urlImgend: '?x-oss-process=style/pic_100x100'
    // urlImgend: '?x-oss-process=style/pic_x60'
    // urlImgend: '?x-oss-process=style/index_pic'
    urlImgend: '?x-oss-process=style/728_488_crop',
    urlImgLayout: '?x-oss-process=style/mini_thumbnail'
    // urlImgend: '?x-oss-process=style/475_680_crop'
    // urlImgend: '?x-oss-process=style/640_400_crop'
  }
})

其中g(shù)lobalData中是全局變量的配置，url是自己的請求地址前綴，urlImg是圖片地址前綴，剩下一些是oss相關(guān)東西，不需要的可以不用關(guān)注。然后在onLaunch函數(shù)中寫了一個(gè)登錄的方法，wx.login()是調(diào)用接口獲取登錄憑證（code）。通過憑證進(jìn)而換取用戶登錄態(tài)信息，包括用戶的唯一標(biāo)識(shí)（openid）及本次登錄的會(huì)話密鑰（session_key）等。用戶數(shù)據(jù)的加解密通訊需要依賴會(huì)話密鑰完成。該方法為微信內(nèi)置方法，具體使用方法可看小程序開發(fā)文檔，wx.request()為小程序的請求函數(shù)，在該方法內(nèi)請求自己在后端定義的接口即可。

7.對于app.wxss文件為全局的css文件，這里不再詳細(xì)說明

8.下面講一下具體的頁面，以index頁面為例，其他頁面不再一一講解，有問題可以評論提出來，大家一起討論學(xué)習(xí)。

9.首先是index.json文件

{
  "enablePullDownRefresh": false,
  "navigationBarTitleText": "發(fā)現(xiàn)"
}

其中enablePullDownRefresh是配置該頁面是否開啟當(dāng)前頁面的下拉刷新，默認(rèn)是false,即不啟用下拉刷新。navigationBarTitleText是指該頁面頂部標(biāo)題

10.主要看一下index.js文件，小程序的js運(yùn)行機(jī)制以及使用方式有點(diǎn)像react和vue，都有自己的生命周期函數(shù)，以及元素渲染。

/**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    swiperIndex: 1,  //當(dāng)前所在輪播圖索引
    bannerOne:{},    //第一張banner上的內(nèi)容
    bannerTwo:[],    //第二張banner上的內(nèi)容
    urlImg: getApp().globalData.urlImg,   //全局使用的圖片前綴
  },

首先是data對象，為頁面的初始數(shù)據(jù)，供全局使用，也是index.wxml里動(dòng)態(tài)渲染數(shù)據(jù)的來源，想要在index.wxml中使用什么數(shù)據(jù)，就要在這定義。

下面說一下小程序的幾個(gè)生命周期函數(shù)吧，主要用到的有onLoad函數(shù)，頁面加載時(shí)觸發(fā)。一個(gè)頁面只會(huì)調(diào)用一次，可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)?？梢栽谠摵瘮?shù)中獲取在頁面路徑中傳過來的參數(shù)，最重要的是該函數(shù)為異步加載函數(shù)，所以一定要小心使用，其中有很多坑。在index.js中，我在該函數(shù)中調(diào)用了getBannerOne()函數(shù)，getBannerOne()函數(shù)是向后端發(fā)送請求獲取banner上的內(nèi)容，因?yàn)閎anner上的內(nèi)容只需要在該頁面打開后加載一次，在onLoad函數(shù)中調(diào)用，如果你的請求中需要一些其他的請求后得到的參數(shù),比如在一開始的app.js文件中獲取的openid,那這里你就需要小心一些了，因?yàn)閛nLoad函數(shù)為異步函數(shù)，小程序打開后加載的第一個(gè)頁面我定義的是index頁面，此時(shí)小程序會(huì)同時(shí)加載app.js文件和index.js文件中的onLoad()函數(shù)，所以可能你在onLoad中使用的openid在app.js文件中還未獲取到，就造成了錯(cuò)誤。有兩種解決方案，僅供參考。

1）如果不是一定需要在onLoad函數(shù)中加載的方法，可以放到onShow()函數(shù)中使用，該生命周期函數(shù)為同步方法，會(huì)在app.js文件加載完成后加載，會(huì)在頁面顯示/切入前臺(tái)時(shí)觸發(fā)。

2）使用es6的Promise對象方法，這里不再細(xì)說，有興趣可以看阮一峰老師的ECMAScript 6 入門里的Promise。

然后是onReachBottom函數(shù),是頁面上拉觸底的事件函數(shù)，在上拉加載更多做分頁的時(shí)候經(jīng)常會(huì)用到。

最最常用的便是這三個(gè)生命周期函數(shù)，其他的幾個(gè)生命周期函數(shù)在用到的時(shí)候在小程序文檔中查看一下使用方法即可。

（附Page 實(shí)例的生命周期圖）

11.然后簡單的說一下index.wxml文件吧，該文件主要是ui展示的代碼了，可以在{{}}中使用index.js中data中的值，更多的可以看我的github,例

<view class="updateLi">
   <image data-id="{{bannerOne.id}}" class="findImg" src="{{urlImg + bannerOne.bookImg}}" bindtap='toBook' />
     <view class="bookName">{{bannerOne.title}}</view>
     <view class="bookAuthor">{{bannerOne.author}}</view>
   <view class="readCount">300人在讀</view>
</view>

12.最后吐槽一下小程序吧，坑很多，畢竟沒開源，很多東西不支持，能支持的問題又很多，且行且珍惜