這周主要是跟著慕課網(wǎng)學(xué)習(xí)做了一個(gè)小程序，開發(fā)小程序需要微信開發(fā)者工具。電影小程序

一、 代碼構(gòu)成

1上渴、 json文件 配置文件

• project.config.json 項(xiàng)目配置文件
• app.json 全局配置文件
• page.json 頁(yè)面配置文件

2岸梨、wxml 模板文件，描述頁(yè)面結(jié)構(gòu)稠氮，相當(dāng)于html

3曹阔、wxss 樣式文件 調(diào)整頁(yè)面樣式莉擒，相當(dāng)于css

4辅愿、js 腳本邏輯文件羡蛾，頁(yè)面和用戶的交互邏輯

二山橄、基本語(yǔ)法

1、數(shù)據(jù)綁定

小程序的數(shù)據(jù)一般情況下需要?jiǎng)討B(tài)的從服務(wù)端獲取然后渲染輸出到視圖中撞秋，wxml中的動(dòng)態(tài)數(shù)據(jù)均來自于 page 中的 data巍扛，數(shù)據(jù)綁定使用 {{}} 將變量包起來

<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2连茧、循環(huán)

<view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
// 用 wx:for 后面需要加 wx:key="{{index}}" 
item 表示數(shù)組中的每一項(xiàng)
index 表示每項(xiàng)中唯一的值

3鬓长、 條件渲染

1谒拴、用 wx：if 來判斷是否需要渲染該代碼模塊，也可以用 wx:elif 和 wx:else來添加一個(gè) else 塊

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

2涉波、 hidden

<view hideen="{{ data  }}"> hello world</view>    // 當(dāng)data的值為 ture ，hello world
會(huì)被隱藏啤覆，當(dāng)data的值為 fasle，hello world會(huì)被顯示

兩者區(qū)別 ：hidden 組件始終會(huì)被渲染窗声，只是簡(jiǎn)單的控制顯示與隱藏 ，wx：if只渲染 條件為 ture 的代碼

三 笨觅、wxss

1、尺寸單位

rpx屋摇，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)幽邓，適配不同寬度的屏幕

image.png

2、@import "common.wxss";

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表柒啤，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束担巩。

3、使用第三方樣式庫(kù)

先要初始化

• 打開miniprogram 右鍵 ‘在終端打開’
• $ npm init //在 miniprogram 文件夾中初始化一個(gè)文件涛癌，這步完成后可以看到在小程序 miniprogram 中生成一個(gè) package.json文件
• $ npm i vant -weapp -s --production 安裝 vant 組件庫(kù) （在vant官網(wǎng)查看用法）
• 回到小程序頁(yè)面點(diǎn)擊開發(fā)者工具，選擇‘構(gòu)建npm’
• 點(diǎn)擊開發(fā)工具最右邊詳情，勾選 ‘使用npm模塊’

這樣才算完成引用第三方組件庫(kù)

四拳话、云開發(fā)

提供云函數(shù)先匪、 云存儲(chǔ)、 云數(shù)據(jù)庫(kù) 三大基礎(chǔ)能力

image.png

1弃衍、云數(shù)據(jù)庫(kù)

傳統(tǒng)數(shù)據(jù)庫(kù)和云數(shù)據(jù)庫(kù)的區(qū)別

1.1呀非、數(shù)據(jù)類型

• string 字符串
• Number 數(shù)字
• Object 對(duì)象
• Array 數(shù)組
• Bool 布爾
• GeoPonit 地理位置點(diǎn)
• Date 時(shí)間（是客戶端的時(shí)間不是服務(wù)端的時(shí)間）
• Null 空 （相當(dāng)于占位符）

1.2 操作云數(shù)據(jù)庫(kù)

操作數(shù)據(jù)庫(kù)之前要首先對(duì)數(shù)據(jù)庫(kù)進(jìn)行初始化，然后在云開發(fā)中創(chuàng)建一個(gè)云數(shù)據(jù)庫(kù)“user”集合

const db = wx.cloud.datebase();          //初始化
const testdb =  wx.cloud.datebase({   //切換環(huán)境
   env:'test'                                           //當(dāng)前環(huán)境名稱
});
//插入數(shù)據(jù)
db.collection('user').add({
  data{                     //插入數(shù)據(jù)的屬性和值
      name:'jack',
      age:20
}
})
//更新數(shù)據(jù)
db.collection('user').doc('id')            //id為唯一標(biāo)識(shí)镜盯，知道更新的是哪一條數(shù)據(jù)
.update({
  data{                     //更新數(shù)據(jù)的屬性和值
      age:14
}
})

//刪除一條數(shù)據(jù)
db.collection('user').doc('id')            //id為唯一標(biāo)識(shí)岸裙，知道刪除的是哪一條數(shù)據(jù)
.remove()

//查找數(shù)據(jù)
db.collection('user').where({

name:'jack'        // 查詢name為jack這條數(shù)據(jù)
}) .get()              // 通過 .get() 去獲取這個(gè)用戶

注意：在小程序端是沒有辦法做到多條數(shù)據(jù)刪除，只能做到單條數(shù)據(jù)的刪除速缆，想要多條數(shù)據(jù)刪除要在云函數(shù)端去操作

2降允、云函數(shù)

云函數(shù)小程序?qū)懺谠贫说拇a，相當(dāng)于小程序的服務(wù)端后臺(tái)代碼艺糜，我們不需要去管理服務(wù)器拟糕，只需要在開發(fā)工具編寫代碼，通過一鍵上傳部署代碼倦踢，就可以運(yùn)行代碼送滞，小程序的運(yùn)行環(huán)境是 nodejs

1. 創(chuàng)建云函數(shù)

云函數(shù)根目錄

云函數(shù)根目錄

在根目錄下右鍵新建 nodejs 云函數(shù)，然后輸入云新建函數(shù)的名稱

exports.main = async (event, context) => {          // event 在調(diào)用云函數(shù)時(shí)小程序端傳來的參數(shù) context 調(diào)用的上下文辱挥，包括一些用戶信息
   return {
    sum: event.a + event.b
  }
}
在云函數(shù)有改動(dòng)的情況下 我們要上傳并部署云函數(shù)

2 .如何在小程序端調(diào)用云函數(shù)

 // 調(diào)用云函數(shù)
wx.cloud.callFunction({    
  // 云函數(shù)名稱
  name: 'add',
  // 傳給云函數(shù)的參數(shù)
  data: {
    a: 1,
    b: 2,
  },
})
.then(res => {
  console.log(res.result)   // 3
})
.catch(console.error)

3. 如何獲取當(dāng)前用戶的 openid

在小程序云函數(shù)中自帶一個(gè) login 這樣的函數(shù)犁嗅，它的作用就是獲取當(dāng)前用的的 OPENID、APPID晤碘、及 UNIONID

login /index.js

wx.cloud.callFunction({
  name: 'login ',
  complete: res => {
    console.log('callFunction login result: ', res)
  }
})
會(huì)在調(diào)試器看到輸出的 res 為如下結(jié)構(gòu)的對(duì)象：

{
  "APPID": "xxx",
  "OPENID": "yyy",
  "UNIONID": "zzz", // 僅在滿足 unionId 獲取條件時(shí)返回
}

4. 如何通過云函數(shù)批量刪除云數(shù)據(jù)庫(kù)中的數(shù)據(jù)

• 新建一個(gè)云函數(shù) （batchDelete）

const db = cloud.database();   // 獲取到數(shù)據(jù)庫(kù)
exports.main = async  (event, context) => {
  return await  db.collection('user').where({       // 符合條件的信息
    name: 'jerry'
}).remove();                                 // 刪除符合條件的信息
}

async await 是對(duì) js 異步操作的一種方式

3. 云存儲(chǔ)

image.png

1. 文件上傳

image.png

首先我們要選擇圖片

// 選擇圖片
wx.chooseImage({
  count: 1,                                           // 當(dāng)前選擇圖片個(gè)數(shù)褂微，在小程序中最多支持是9張
  sizeType: ['original', 'compressed'], // original 以原文件形式上傳 compressed 以壓縮形式上傳
  sourceType: ['album', 'camera'],       // album 文件來源于相冊(cè)，camera文件來源于照相機(jī)
  success (res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths     // tempFilePaths 當(dāng)前顯示圖片的臨時(shí)路徑
    wx.cloud.uploadFile({
    cloudPath: 'new Date().getTime() + .png', // 上傳至云端的路徑時(shí)間的毫秒數(shù)园爷，保證上傳的圖片不會(huì)因重名被覆蓋掉
    filePath: 'tempFilePaths[0]  ', // 小程序臨時(shí)文件路徑宠蚂，這里 tempFilePaths 需要的是字符串而不是數(shù)組 
    success: res => {
    // 返回文件 ID
    console.log(res.fileID)
    db.collection('image').add({
     data {
            fileID : res.fileID
      }
        }).then(res=>{
            consle.log(res)
      }).catch(res=>{
        consle.error(err)
      })
  },
  fail: console.error
})
  }
})

2. 如何展示圖片

<block wx:for="{{ imges }}" wx:key=" {{ index }} ">       // block 相當(dāng)于 div 把對(duì)應(yīng)的 wx:for 寫在 block 上，其實(shí) block 是不會(huì)顯示在網(wǎng)頁(yè)上 
  <image src=" "> </image src=" {{ item.fileID }}">
<block>

js
data：{
images:[]
}
// 查到剛才我這個(gè)用戶上傳的圖片 
wx.cloud.callFunction({
  name: 'login ', 
}).then(res=>{    // res會(huì)返回 openid
    db.collection('image').where({
      -openid : res.result.openid
        }).get().then(res2=>{
         consle.log(res2)   // res2 是圖片路徑
          this.setdata ({
          images: res2.data

})
 }) .catch(res=>{
        consle.error(err)
      })
})

3. 下載文件

image.png

<button data-fileid="{{ item.fileID }}" bindtap ="downloadFile"> 下載圖片 </button> 
js
downloadFile:function(event){
  wx.cloud.downloadFile({
  fileID: 'event.target.dataset.fileid', // 獲取當(dāng)前文件fileID
  success: res => {
    // 返回臨時(shí)文件路徑
    console.log(res.tempFilePath)
// 保存圖片到手機(jī)相冊(cè)
      wx.saveImageToPhotosAlbum({
         filePath：res.tempFilePath
        success(res) { 
          wx.showToast({    //表示在小程序中彈出一個(gè)框并在一定時(shí)間內(nèi)消失掉
              title:'保存成功',
})
}
})
  },
  fail: console.error
})
}

五童社、電影小程序的開發(fā)

首先我們?cè)陔娪笆醉?yè)要寫個(gè)云函數(shù)拿到豆瓣電影數(shù)據(jù)求厕，然后在小程序端調(diào)用云函數(shù)呀癣，把數(shù)據(jù)渲染到視圖中弦赖，在電影評(píng)論頁(yè)面我們需要把最新評(píng)論的信息存儲(chǔ)到云數(shù)據(jù)庫(kù)，在我的頁(yè)面當(dāng)中要通過 小程序 button 獲取用戶信息沼沈。

1、云函數(shù)拿到豆瓣電影數(shù)據(jù)

首先我們要在云函數(shù)目錄下建立一個(gè)文件夾為 movielist 在這個(gè)目錄下右鍵打開終端 下載安裝

$ npm install --save request
$ npm install --save request-promise


// 在云函數(shù)文件中
const cloud = require('wx-server-sdk')

cloud.init()  // 初始化 cloud
var rp = require('request-promise');

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
 console.log(event)  // console.log 的內(nèi)容可以在云開發(fā)云函數(shù)調(diào)用日志查看

 return rp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`)  // 查詢豆瓣電影接口 
   .then(function (res) {
     console.log(res);
     return res;
   })
   .catch(function (err) {
     console.err(err);
   });
}

2、在小程序中調(diào)用云函數(shù)

data: {
    movieList:[],
  },       // 傳到頁(yè)面數(shù)據(jù) 
// 調(diào)用云函數(shù)
 wx.cloud.callFunction({    
      name: "movielist",   // 云函數(shù)名字
      data:{                       // 傳給云函數(shù)的參數(shù)
        start: this.data.movieList.length,  
        count: 10,
      }
    }).then(res => {             // 成功后
      console.log(res);
      this.setData({               // 給 data里數(shù)據(jù)賦值 
        movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
      })
      wx.hideLoading()
    }).catch(err => {            // 失敗后
      console.error(err);
      wx.hideLoading()
    });

3晦嵌、在小程序中把數(shù)據(jù)渲染到視圖中

<view class='movie' wx:for="{{movieList}}" wx:key="{{index}}">   // 循環(huán)movieList
  <image class="movie-img" src="{{item.images.small}}"></image>
  <view class="movie-info">
    <view class="movie-title">{{ item.title }}</view>
    <view> 觀眾評(píng)分：
      <text class="movie-scope"> {{item.rating.average}}分</text>
    </view>
    <view> 主演：
      <text wx:for="{{item.casts}}" wx:key="{{index}}"> {{item.name}}</text>
    </view>
    <view>年份：{{ item.year }}</view>
  </view>
  <button bindtap="gotoComment" data-movieid= "{{ item.id }}" class="movie-comment">評(píng)價(jià)</button> 
</view>

4惭载、獲取用戶信息

<view class="user-info">
  <image class="user-img" src="{{ userUrl}}"></image>
  <view class='user-name'> {{ userName }} </view>
</view>
<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>
//js
 data: {
    userUrl: '',
    userName: '',
  },
 onGotUserInfo: function (event) {
    console.log(event.detail.userInfo)
    this.setData({
      userUrl: useinfo.avatarUrl,
      userName: useinfo.nickName,
    })
  },