This time I will bring you a quick WeChat mini program. What are the precautions for quick WeChat mini program? The following is a practical case, let’s take a look.

Which "mini program" demo should you choose?

On Github, a well-known gay dating website, there are many demos of "mini programs", but most of them are just simple API demonstrations, and some even directly write the page data in a json file (clearly there is a network request API ). What I want to experience is a project that can seamlessly connect the server side and the mini program side (the experience is quite enjoyable). In the end, I chose the "Small Photo Album" project officially launched by Tencent Cloud.

"Small Photo Album" mainly implements the following functions:

• List the list of pictures in the object storage COS.

• Click the upload picture icon in the upper left corner to call the camera to take a picture or select a picture from the mobile phone album, and upload the selected picture to the object storage COS.

• Tap any picture to enter full-screen picture preview mode, and slide left or right to switch preview pictures.

• Long press any picture to save it locally or delete it from COS.

Effect demonstration diagram (limited by development tools, some functions have not yet been implemented)

Object storage service (Cloud Object Service) is a highly available, highly stable, and highly secure cloud storage service launched by Tencent Cloud for enterprises and individual developers. Any amount and form of unstructured data can be put into COS and the data can be managed and processed in it.

The reason why I chose Tencent Cloud's Demo is, firstly, because it is launched by Tencent itself, and the quality of the project is guaranteed; secondly, because it is rare It not only talks about small program development, but also introduces cloud deployment projects.

Programmers with a little experience know that the architecture must be separated from dynamic to static. It is best not to place static files on your own server, but on COS, an object storage server specially used for storage, and use CDN to accelerate it. The backend of "Little Album" uses Node.js, and Nginx serves as a reverse proxy.

Step one: Set up the development environment

First, we need to set up the development environment for WeChat "mini program" locally. That is to download the developer tools. WeChat has officially launched the official version of the IDE. There is no need to download the cracked version. Open the official website download page and choose according to your operating system. I am using Mac version.

After installation, open and run, you will be asked to scan the WeChat code to log in. After that, you can see the page to create the project.

Choose to add a project. If there is no AppID, select None (if you write it randomly, an error will be reported and you may not be able to enter the project). If the project directory you selected is empty, please check "Create quick start project in the current directory" as shown in the figure.

After clicking "Add Project", we will enter the debugging page of the development tool.

Step 2: Download the source code of "Small Photo Album"

Next, we download the source code of "Small Photo Album". You can choose to download directly from the link provided by Tencent Cloud official website, or you can download it from the Github of Tencent Cloud team. Warehouse pull. I recommend pulling from the Github repository so you can get the latest code in a timely manner.

git clone https://github.com/CFETeam/weapp-demo-album.git

Finally, we will get a file directory similar to this.

Briefly explain the directory structure:

• applet (or app): "Small photo album" application package code, you can directly Open it as a project in WeChat developer tools.

• server: The built Node server code serves as a server to communicate with the app, and provides CGI interface examples for pulling image resources, uploading images, and deleting images.

• assets: Demonstration screenshot of "Small Album".

After the source code is downloaded, we open the WeChat web developer tool, create a new project "Small Album", and select the directory applet (or app).

"Small Photo Album" source code analysis

Before deployment, let's briefly analyze the specific code of "Small Photo Album". After all, just looking at the effect is not our purpose. Our purpose is totake "Small Photo Album" as an example to understand how to develop a small program and interact with the server.

"Small Album" contains an app that describes the overall program and multiple pages that describe their respective pages. The main program app is mainly composed of three files, namely app.js (mini program logic), app.json (mini program public settings) and app.wxss (Mini program public style sheet), the first two of which are required files. The config.js file contains some settings for deploying domain names, so don’t worry about it now.

In the pages directory, there are two page pages, namely index and album. The page structure is relatively simple, where index is the page entered by default when the mini program is started. Under each page, there must be at least two files: .js (page logic) and .wxml (page structure). .wxss (page style sheet) and .json (page configuration) files are optional. You may have noticed that the filenames of these files are the same as the names of the parent directories. This is WeChat's official regulation, which aims to reduce configuration items and facilitate developers.

Next we take the index page as an example for a simple explanation. index.wxml is the presentation layer file of this page. The code is very simple and can be divided into upper and lower parts.

<view>
????<view class="page-top">
????????<text class="username">恭喜你</text>
????????<text class="text-info">成功地搭建了一個微信小程序</text>
????????<view class="page-btn-wrap">
????????????<button class="page-btn" bindtap="gotoAlbum">進入相冊</button>
????????</view>
????</view>
????<view class="page-bottom">
????????<text class="qr-txt">分享二維碼邀請好友結伴一起寫小程序！</text>
????????<image src="../../images/qr.png" class="qr-img"></image>
????????<image src="../../images/logo.png" class="page-logo"></image>
????</view></view>

The demonstration effect of the page is as follows:

We see that there is an "Enter Album" button on the page. Normally understood, after clicking this button we can enter the photo album (this is not nonsense). So how does this operation happen behind the applet?

在?index.wxml?中，我們發(fā)現(xiàn)對應的 button 標簽上定義了一個?bindtap?屬性，綁定了一個叫做?gotoAlbum?的方法。而這個方法可以在?index.js?文件中找到。事實上，文件中也只定義了這一個方法，執(zhí)行的具體動作就是跳轉到 album 頁面。

Page({????//?前往相冊頁
????gotoAlbum()?{
????????wx.navigateTo({?url:?'../album/album'?});
????},
});

album.js?頁面中編寫了程序的主要邏輯，包括選擇或拍攝圖片、圖片預覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體方法和視圖的實現(xiàn)請查看項目源碼。所有的這些功能都寫在 Page 類中。

lib 目錄下提供了小程序會用的一些輔助函數(shù)，包括異步訪問和對象存儲 COS 的 API。

總的來說，和微信官方宣傳的一樣，在開發(fā)者工具下進行小程序的開發(fā)，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發(fā)速度這點上的體驗還是非常爽的。

另外，由于「小相冊」需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進行服務器端的部署和設置。具體請看接下來的步驟。

第三步：云端部署 server 代碼

雖然服務端的開發(fā)不是本文的重點，但是為了全面地體驗「小相冊」的整個開發(fā)部署流程，我們還是有必要了解服務端的部署，這里我們使用的是騰訊云。

If you want to have more fun, you can choose the mini program cloud image officially provided by Tencent Cloud. The server running code and configuration of "Little Album" have been packaged into Tencent Cloud CVM image and can be used directly. It can be said that the cloud is deployed with one click.

If you have not used Tencent Cloud before, you can choose a free trial (I have received a personal version server for 8 days), or receive a gift package to purchase the required services at a preferential price.

#You can also choose to upload the server folder in the "Small Album" source code to your own server.

Step 4: Prepare the domain name and configure the certificate

If you already have a Tencent Cloud server and domain name and have configured https, you can skip steps 4-6.

In the WeChat mini program, all network requests are strictly restricted, and domain names and protocols that do not meet the conditions cannot be requested. To put it simply, your domain name must follow the https protocol. So you also need to apply for a certificate for your domain name. If you don't have a domain name, please register one first. Since we have not received the internal test, we do not need to log in to the WeChat public platform to configure communication domain names for the time being.

Step 5: Nginx configuration https

In the WeChat applet cloud sample image, Nginx has been deployed, but it still needs to be configured in /etc/nginx/conf.d Modify the domain name, certificate, and private key in the configuration below.

請將紅框部分換成自己的域名和證書，并且將?proxy_pass?設置為 Node.js 監(jiān)聽的端口，我的是 9993。

配置完成后，重新加載配置文件并且重啟 Nginx。

sudo?service?nginx?reload
sudo?service?nginx?restart

第六步：域名解析

我們還需要添加域名記錄，將域名解析到我們的云服務器上，這樣才可以使用域名進行 https 服務。在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。

解析生效后，我們的域名就支持 https 訪問了。

第七步：開通和配置 COS

由于我們希望實現(xiàn)動靜分離的架構，所以選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務，需要登錄?COS 管理控制臺，然后在其中完成以下操作。

1. 點擊創(chuàng)建 Bucket。會要求選擇所屬項目，填寫相應名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。
   

2. 然后在 Bucket 列表中，點擊剛剛創(chuàng)建的 Bucket。然后在新頁面點擊“獲取API密鑰”。
   

彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調用 COS API）。保管好這些信息，我們在稍后會用到。

1. 最后，在新的 Bucket 容器中創(chuàng)建文件夾，命名為photos。這點后面我們也會提到。

第八步：啟動「小相冊」的服務端

在官方提供的鏡像中，小相冊示例的 Node 服務代碼已部署在目錄?/data/release/qcloud-applet-album?下。進入該目錄，如果是你自己的服務器，請進入相應的文件夾。

cd?/data/release/qcloud-applet-album

在該目錄下，有一個名為?config.js?的配置文件（如下所示），按注釋修改對應的 COS 配置：

module.exports?=?{????//?Node?監(jiān)聽的端口號
????port:?'9993',
????ROUTE_BASE_PATH:?'/applet',
????cosAppId:?'填寫開通?COS?時分配的?APP?ID',
????cosSecretId:?'填寫密鑰?SecretID',
????cosSecretKey:?'填寫密鑰?SecretKey',
????cosFileBucket:?'填寫創(chuàng)建的公有讀私有寫的bucket名稱',
};

另外，cd ./routes/album/handlers，修改?list.js，將?const listPath?的值修改為你的Bucket 下的圖片存儲路徑。如果是根目錄，則修改為?'/'。當前服務端的代碼中將該值設置為了?'/photos'?，如果你在第七步中沒有創(chuàng)建該目錄，則無法調試成功。

小相冊示例使用 pm2 管理 Node 進程，執(zhí)行以下命令啟動 node 服務：

pm2?start?process.json

第九步：配置「小相冊」通信域名

接下來，在微信 web 開發(fā)者工具打開「小相冊」項目，并把源文件config.js中的通訊域名 host 修改成你自己申請的域名。

將藍色框內的內容修改為自己的域名

然后點擊調試，即可打開小相冊Demo開始體驗。

最后提示一點，截止目前為止，微信小程序提供的上傳和下載 API 無法在調試工具中正常工作，需要用手機微信掃碼預覽體驗。但是由于沒有內測資格，我們暫時是沒辦法體驗了。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

推薦閱讀：

怎樣使用angularjs中http服務器

怎樣使用seajs在require書寫約定

The above is the detailed content of WeChat Mini Program Quick Start. For more information, please follow other related articles on the PHP Chinese website!