Wechat native applet cloud development learning record 01

WeChat public platform Register applet https://mp.weixin.qq.com/

⼩ Procurer ⽅⽂ files

https://developers.weixin.qq.com/miniprogram/dev/framework/

Components API ⼯ have
⼯ With download ：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

Components

view
text
button

//⾮ It is often simple to realize the function of wechat customer service ⼒
<view>
 <text> hello world</text>
 <button type="primary" open-type="contact"> Customer service </button>
</view>

camera

// html
<camera device-position="back" style="width: 100%; height: 300px;"></camera> <button type="primary" bindtap="takePhoto"> Taking pictures </button> <image mode="widthFix" src="{
    {src}}"></image>

//js
Page({
    
 /** * ⻚⾯ The initial data  */
 // It's kind of like vue Medium data
 data: {
    
 src:""
 },
 takePhoto(){
    
 let ctx = wx.createCameraContext();
 ctx.takePhoto({
    
 success:res=>{
    
 console.log(res);
 // It's kind of like react setState
 this.setData({
    
 src: res.tempImagePath
 })
 }
 })
 }
})

Development of cloud

Developers can make ⽤ Cloud development wechat ⼩ Program 、⼩ game ,⽆ The server needs to be built , Can make ⽤ Cloud energy ⼒（Serverless clothing
service ）.
Serverless = server + less (“ Less servers , or ⽆ Server's ”)
Cloud development provides developers with a complete source ⽣ Cloud ⽀ Holding and wechat Services ⽀ a , Weakening back end and O & M concepts ,⽆ The server needs to be built , send
⽤ Platform API Into the ⾏ nucleus ⼼ Business development , Fast online and iterative , At the same time it ⼀ can ⼒, The same developers have made ⽤ Of
Cloud services are compatible , Not mutually exclusive .

Traditional development model
Development ⼈ Member has been developed -> test （ Test environment ）->( The server , Local server or ah ⾥ Cloud server )-》 go online （ Ministry
Deploy online server ）
I ⼀ individual ⼈ Want to develop items ⽬ From development to online money ！！！

climb ⾍ Case study
https://book.douban.com/

• ⽀ a isbn Code search
• We use ⼩ Scanning code of program can ⼒, Get books isbn code
• With the help of cloud function , Realize to isbn Corresponding books Information fetching （ Corresponding to the previous connection ⼝）

Adjustment item ⽬⽬ record
project.config.json

"miniprogramRoot": "mp/", //⼩ Program ⽬ record   Before ⼩ The content of the program is put in 
"cloudfunctionRoot": "fn/",// Cloud functions ⽬ record   designated ⽬ There are special icons recorded 
	``` pages⽬ Record the new book⽬ record , initialization page ```javascript
//book.wxml
<text> individual ⼈ in ⼼</text>
<button type="primary" bindtap="scanCode"> Add books </button>
//book.js
// mp/pages/book/book.js
Page({
    
 data: {
    },
 scanCode() {
    
 wx.scanCode({
    
 success: res => {
    
 console.log("isbn:" + res.result);
 // climb ⾍ ⼩ The program side cannot do , We need cloud functions 
 }
 });
 }
});

Cloud function write crawl ⾍

• app.js

App({
    
 onLaunch: function() {
    
 // Initialize the cloud development environment 
 wx.cloud.init({
    
 // Are you going to ⽤ User access is recorded to ⽤ Account management , In the console ⻅
 traceUser: true
 });
 }
});

• Right click fn⽬ Record new cloud functions , In fact, that is nodejs term ⽬ book14

//  Cloud functions ⼊⼝⽂ Pieces of 
const cloud = require("wx-server-sdk");
cloud.init();
//  Cloud functions ⼊⼝ function 
// wx.cloud.callFunction When , Will hold ⾏ This main function 
exports.main = async (event, context) => {
    
 let {
     a, b } = event;
 return {
    
 sum: a + b
 };
};

• Upload and deploy cloud functions Or it won't work
• ⼩ Program internal adjustment ⽤ Cloud functions , send ⽤wx.cloud.callFuncti

// mp/pages/book/book.js
Page({
    
 data: {
    },
 scanCode() {
    
 wx.scanCode({
    
 success: res => {
    
 console.log("isbn:" + res.result);
 // climb ⾍ ⼩ The program side cannot do , We need cloud functions 
 wx.cloud.callFunction({
    
 name: "book14",// Cloud function name 
 data: {
    
 a: 10,
 b: 4,
 isbn:res.result
 },
 success: res => {
    
 console.log(res);
 }
 });
 }
 });
 }
});

Start climbing ⾍ Logic

• book.js

wx.cloud.callFunction({
    
 name: "book14",// Cloud function name 
 data: {
    
 a: 10,
 b: 4,
 isbn:res.result // hold isbn Transfer the past 
 },
 success: res => {
    
 console.log(res);
 }
 });

• Book14 Cloud functions
• With the help of axios pick up information

npm i axios --save

//  Cloud functions ⼊⼝⽂ Pieces of 
const cloud = require("wx-server-sdk");
const axios = require("axios");// With the help of axios pick up information 
cloud.init();
async function getDoubanBook(isbn) {
    
 //https://search.douban.com/book/subject_search?
search_text=9787229030933
 const url =
 "https://search.douban.com/book/subject_search?search_text=" + isbn;
 let res = await axios.get(url);
 console.log(res, res.data);
 }
getDoubanBook("9787121331565");
//  Cloud functions ⼊⼝ function 
// wx.cloud.callFunction When , Will hold ⾏ This main function 
exports.main = async (event, context) => {
    
 let {
     a, b, isbn } = event;
 return {
    
 sum: a + b
 };
};

• With the help of doubanbook Decrypt Get the information

npm i doubanbook --save

const doubanbook = require("doubanbook");
//⽤ Regular split encrypted information 
 let reg = /window\.__DATA__ = "(.*)"/;
 if (reg.test(res.data)) {
    
 // The first ⼀ Parentheses group data 
 let searchData = doubanbook(RegExp.$1)[0];
 console.log(searchData);
 return searchData;
 }
// Cloud functions   climb ⾍ Return the data 
...
exports.main = async (event, context) => {
    
 let {
     a, b, isbn } = event;
 let bookInfo = await getDoubanBook(isbn);
 return {
    
 sum: a + b,
 title: bookInfo.title
 };
};

• Upload and deploy cloud functions
• wx.showToast Message box To enhance the experience
• Book.js

wx.cloud.callFunction({
    
 name: "book14",
 data: {
    
 a: 10,
 b: 4,
 isbn: res.result
 },
 success: res => {
    
 // Message box 
 wx.showToast({
    
 title: res.result.title
 });
 // Pop-up dialog box 
 wx.showModal({
    
 title: res.result.title
 });
 console.log(res);
 }
 });

Now we can get some information about books , other ⼤ Some information can be found through details ⻚ To get
We can go through cheerio This ⼯ have adopt jquery Syntax to get data
Provide more information

npm i cheerio --save

Cloud functions book14.js

const cheerio = require("cheerio");
...
exports.main = async (event, context) => {
    
 let {
     a, b, isbn } = event;
 let bookInfo = await getDoubanBook(isbn);
 // For more details ⻚ Information about 
 const detailPage = await axios.get(bookInfo.url);
 // send ⽤cheerio  To parse this ⻚⾯,⽣ Object , You can make ⽤jq grammar 
 const $ = cheerio.load(detailPage.data);
 // Get profile information 
 const summary = $("#link-report .intro").text();
 return {
    
 summary, // Introduction to the information 
 sum: a + b,
 title: bookInfo.title,
 image: bookInfo.cover_url, // Pictures of books ⽚
 alt: bookInfo.url // details ⻚url
 };
};

Warehousing operation

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/

Database operation
Additions and deletions
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html
initialization
⼩ Program book.js

// initialization   You need to get the index of the database first ⽤
const db = wx.cloud.database();
page({
    })

Insert new record

// mp/pages/book/book.js
const db = wx.cloud.database();
Page({
    
 data: {
    },
 scanCode() {
    
 wx.scanCode({
    
 success: res => {
    
 wx.showLoading();// Show loading
 wx.cloud.callFunction({
    
 ...
 success: res => {
    
 //  add to ⼀ A time stamp 
 res.result.create_time = new Date().getTime();
 db.collection("books14").add({
    
 // data  The field indicates the  JSON  data 
 data: res.result,
 success: function(ret) {
    
 // res  yes ⼀ Objects , Among them is  _id  Field marks the... Of the record you just created  id
 if (ret._id) {
    
 console.log(ret);
 wx.showModal({
    
 title: " Tips ",
 content: `${
      res.result.title} Add success `
 });
 }
 wx.hideLoading();// hide loading
 }
 });
 }
 });
 }
 });
 }
});

Now the database ⾥ There are already data ⾥,
Next we make ⽤ The data is displayed at the front end
send ⽤ Inquire about ,⽐ More complicated , It will involve points ⻚, Sort , Grouping and so on ...
newly build books⻚⾯/pages operation
do ⼀ some ⻚⾯ Title Setting

//books/app.json  do ⼀ some ⻚⾯ Title Setting 
{
    
 "usingComponents": {
    },
 "navigationBarTitleText": " The book list " }

get data , Still need ⽤ To the database
books.js

// mp/pages/books/books.js
const db = wx.cloud.database();
Page({
    
 /** * ⻚⾯ The initial data  */
 data: {
    },
 /** * ⽣ Life cycle function -- monitor ⻚⾯ load  */
 onLoad: function(options) {
    
 //get  Sure ⼀ Secondary acquisition 20 Data 
 db.collection("books14").get({
    
 success: res => {
    
 // res.data  yes ⼀ Data that contains all records in the collection that have permission to access , No more than  20  strip 
 this.setData({
    
 books: res.data
 });
 }
 });
 },
 /** * ⻚⾯ Handler for pull-up bottom event  */
 onReachBottom: function() {
    },
});

send ⽤wx:for Make a list of grammar
Make ⽤ wx:for Control attribute binding ⼀ An array , Can make ⽤ The data of each item in the array renders the component repeatedly .
The subscript variable name of the current item in the default array defaults to index , The variable name of the current item of the array defaults to item
The list of rendering ⽂ files ：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
image mode⽂ files ：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

<view wx:for="{
     {books}}">
 <view class="title">{
   {item.title}}</view>
 <image class="pic" mode="aspectFit" lazy-load="true" src="{
     {item.image}}">
</image>
 <text>{
   {item.summary}}</text>
</view>