Development of small micro-channel program --- hello world

Unable to record sites, pre-made a small micro-channel program (Developer Edition) shelved, almost forgot the development process. Now re-sort, to be a record.

First, the most basic example of applet distal hello

1, download and install developer tools micro-channel official website: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

2, after running the first prompt scan code, confirm login on the phone (I have previously registered micro letter public platform, if you have not registered, it may need to go to register). After logging in, the page shows a few small projects program before I do. The first row is a plus sign (+) for the new project.

3, plus points on the steps of (+), the new project name is written: hello; I set the directory is: E: \ wxDEV \ hello; AppId I clicked on are: test number; development model: a small program; back-end service: default does not use cloud services; language: javascript; then: New

4, in the micro channel developer tool interface, three points cross points (...) pop E: \ wxDEV \ hello hard disk directory, which is the front end of the applet code. Point Preview (eye shape) icon will pop up a two-dimensional code, the scan code using a mobile phone, the phone can be tested on a small program. (Micro-channel page in mobile micro letter, slide down, there will be little recently used programs)

5, but it represents what those codes? Manual: https://developers.weixin.qq.com/miniprogram/dev/framework/ following analysis E: \ wxDEV \ hello in the code file

6, sitemap.json file there is a link: https: //developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html; looked at, it is to control the micro-channel reptile, namely whether to allow page content to be search users to

7, project.config.json project configuration file: https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html such as: can be set to a small plug-in project.

8, app.wxss https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html equivalent CSS style sheet file.

9, App.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD% AE applet configuration, divided into global configuration and page layout. Such as: What page, page title, color, etc.

10, app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html registered applet APP instance, roughly equivalent to the main function of the program entry bar.

11, directory utils util.js probably have to introduce external js files; Reference: https://www.cnblogs.com/wangting888/p/9701658.html

12, there are two directories, index and logs directory pages, each one representing a small program page. Wherein suffix .wxml html page corresponds to the other similar previously described, the style sheet are disposed and js code file. Reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

Second, only the front-end is not enough, the conditions did not take the server how to do? Fortunately, the micro-channel developer tools provides a powerful cloud development capabilities, refer to the above steps, the new project helloyun (cloud is node.js language)

1, reference step 3 above applet New Project Project Name: helloyun; directory: E: \ wxDEV \ helloyun; AppID: only choose their own registered AppID, test number can not cloud development; development model: a small program; backend services: applet cloud development; and then New. Examples of cloud development has been generated. Can point preview, and view on the phone, the phone applet itself acts like a tutorial, which introduces two back-end operations (or cloud) database (or function call) approach: First, the front-end operation of the database; two in cloudfunctions it is currently in New cloud function, use wx-derver-sdk

Reference: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

2. Contents cloud development projects appears to be more concise, E: \ wxDEV \ helloyun directory structure is as follows:

--cloudfunctions (directory)

--miniprogram (directory)

－project.config.json

－README.md

3, miniprogram corresponding applet front end (similar to the first part of this article), the corresponding cloud is cloudfunctions directory (August 8, 2019 generated a cloud development projects, and directory structure previously used the legacy development tools generate is not the same), the new version of E: \ wxDEV \ helloyun \ directory cloudfunctions there are four directories:

－callback

－echo

－login

－openapi

4, starting with the phone's cloud development QuickStart starting point upload pictures, then upload pictures. Follow the prompts after the upload, open developer tools, point cloud development, cloud development into the console (make sure you have opened a cloud development function), in storage, you can see my-image.jpg just uploaded.

We start from the front or analysis, developer tools, view the E: \ wxDEV helloyun miniprogram \ pages \ index \ index.wxml code \ \. Upload pictures to find the words. Corresponding bindtap is

doUpload. In the same directory E: \ wxDEV \ helloyun \ miniprogram \ pages \ index \ index.js, find doUpload, upload photos can be seen most notably with wx.chooseImage and

wx.cloud.uploadFile。

5, multiple upload pictures, upload photos will find will be covered, then add a random number in the previous step doUpload function from the original:

const cloudPath = 'my-image' + filePath.match (/ \ [^.] + $ /.?) [0] to:

const cloudPath = 'my-image'+ Math.random() + filePath.match(/\.[^.]+?$/)[0]

Then upload the picture will not be covered.

We can also create a new directory in the cloud storage such as: goods and then change the code to:

const cloudPath = 'goods/my-image' + Math.random() + filePath.match(/\.[^.]+?$/)[0] ，

Compile, preview, you will find pictures uploaded to the directory of goods under a cloud exists.

6, to use a cloud database https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html

Create a goods collection name in the database cloud developer console. Set permissions for everyone to read.

To facilitate testing, in E: \ wxDEV \ helloyun \ miniprogram \ pages \ index \ index.wxml last </ view> before, add the following code

<view class="uploader">
<button class="uploader-text" bindtap="mydbadd">数据库add</button>
</view>

Meanwhile, in E: \ Before wxDEV \ helloyun \ miniprogram \ pages \ index \ index.js last}), add the following code (i.e. E: \ wxDEV \ helloyun \ miniprogram \ pages \ databaseGuide \ databaseGuide.js in Code)

// My test database the Add 
  mydbadd: function () {
     const DB = wx.cloud.database () 
    db.collection ( ' Goods ' ) .add ({ 
      Data: { 
        COUNT: . 1 
      }, 
      Success: RES => {
         // in the returned result will contain the newly created record the _id 
        the this .setData ({ 
          counterId: res._id, 
          COUNT: . 1 
        }) 
        wx.showToast ({ 
          title: ' new successful record ' , 
        }) 
        the console.log ( ' [database] [new record] is successful, the _id:' , Res._id) 
      }, 
      Fail: ERR => { 
        wx.showToast ({ 
          icon: ' none ' , 
          title: ' New record failed ' 
        }) 
        console.error ( ' [Database] [Add Record] failed: ' , ERR) 
      } 
    }) 
  },

Compilation, database click add button, you will see a new back-end database record (make sure you have set up a collection of goods in the back-end database). Developer Tools console console also has a corresponding prompt.

7, to use cloud functions https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html

Right-click the mouse cloudfunctions directory in developer tools, can create, upload, cloud synchronization function (also available directly). From the cloud to develop console can see I had written a few clouds function, forget what to use, can be synchronized to a local view. Synchronization down, the corresponding directory icon in developer tools will become a cloud.

Found in the project root directory project.config.json files, you can see that already have cloudfunctionRoot field (if not, increase the official tutorial)

Then right-click the mouse cloudfunctions directory in developer tools, increasing clouds function called sum, it will generate a sum catalog and E in cloudfunctions directory: \ wxDEV \ helloyun \ cloudfunctions \ sum \ index.js

Let us return value in an increase in index.js: SUM : Event .a + Event .b, namely, the index.js code changes as follows:

// cloud function entry file 
const Cloud = the require ( ' WX-Server-SDK ' ) 

cloud.init () 

// cloud function entry function 
exports.main the async = ( Event , context) => {
   const wxContext = cloud.getWXContext ( ) 

  return {
     Event , 
    OpenID: wxContext.OPENID, 
    AppID: wxContext.APPID, 
    unionid: wxContext.UNIONID, 
    SUM: Event II.A + Event .B, 
  } 
}

To save time, I directly modify the mydbadd function code in step 6 above

// My test database the Add 
  mydbadd: function () {
     const DB = wx.cloud.database () 
    db.collection ( ' Goods ' ) .add ({ 
      Data: { 
        COUNT: . 1 
      }, 
      Success: RES => {
         // in the returned result will contain the newly created record the _id 
        the this .setData ({ 
          counterId: res._id, 
          COUNT: . 1 
        }) 
        wx.showToast ({ 
          title: ' new successful record ' , 
        }) 
        the console.log ( ' [database] [new record] is successful, the _id:' , Res._id) 
      }, 
      Fail: ERR => { 
        wx.showToast ({ 
          icon: ' none ' , 
          title: ' New record failed ' 
        }) 
        console.error ( ' [Database] [Add Record] failed: ' , ERR) 
      } 
    }) 
    wx.cloud.callFunction ({ 
      // cloud function name 
      name: ' SUM ' ,
       // pass function parameters cloud 
      Data: { 
        a: . 1 , 
        B: 2 ,  
      },
    })
      .then(res => {
        console.log(res.result) // 3
      })
      .catch(console.error)
  },

In this way, data at the same time increasing the database will be called cloud function, and displays the result of the call in console developer tool.

reference:

Js file function calls another function Js file method, https://www.cnblogs.com/cxx8181602/p/9340678.html

JS time formatting function https://www.cnblogs.com/henw/archive/2011/10/17/2215545.html

js generates a random number https://www.cnblogs.com/wenxuehai/p/10285585.html

Development of small micro-channel program --- hello world

Guess you like