低代碼從0到1創建小程序項目詳解流程

Posted on by

我們使用代碼編程的時候，前端是寫標簽，後端是寫if/else、for循環來執行邏輯處理。

那低代碼如何體系化的學習呢？這裡我們按照代碼方式學習做個對照。

1 搭建開發工具

一般如果我們使用微信開發者工具，開發小程序需要安裝工具。低碼工具不需要安裝，是在線進行編程。但和開發者工具一樣，低碼也是需要綁定小程序的。我們在開發者工具裡一般是需要配置自己小程序的appid，如果使用瞭雲開發的，還需要開通雲開發。

我們使用低碼開發需要在小程序認證那塊，綁定自己的小程序。

我這裡一個綁定成功瞭，一個綁定失敗瞭。失敗的原因是小程序和我們的低碼賬號不是同主體，意思是必須以你自己的微信號申請，不能綁定別人的小程序。

2 創建項目

我們使用微信開發者工具，打開工具的時候就要求創建項目，所謂的創建項目是在你本地新建一個文件夾，然後按照小程序項目的要求生成對應的目錄結構。比如有js、json、wxml、wxss等。

低碼中我們講的創建項目是指創建應用，一個應用就相當於一個項目。不同於小程序，低碼的外延更廣，可以創建PC端的項目，也可以創建移動端的項目。移動端的項目不僅可以創建小程序，也可以創建H5。

而且比小程序方便的是，低碼是可以根據模板創建項目的。所謂的模板是指事先已經開發好的項目，就像我們從github上clone一樣。當你clone完畢後整個工程的源代碼就都下載到瞭本地。低碼中依據模板新建是將做好的項目安裝到你自己的空間裡。這樣你就有瞭一套成熟的模板，可以在此基礎上進行修改。這樣做無疑大大的提高瞭開發效率。

3 功能開發

微信小程序獨創瞭一套語法，分別是wxjs、wxml、wxss。如果我們希望開發難免增加瞭不少難度，因為又得單獨學習一套語法。低碼的話組件是使用的react，低碼編輯器裡是用的javascript。後臺方法是用的雲函數，學習nodejs即可。總體你隻要學會瞭Js開發低碼應用是沒啥問題的。

低碼中也有頁面的概念，但是是可視化創建的。

頁面開發的時候完全是可視化的拖拽，並不需要學習啥語法知識

如果需要給組件設置事件的，可以使用平臺方法，也可以使用自定義方法

自定義方法是按照Js語法進行編程

export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const { OPENID, FROM_OPENID } = await app.utils.getWXContext()
    let userId = FROM_OPENID || OPENID
    if (!userId) {
      const { wedaId } = await app.cloud.getUserInfo()
      userId = wedaId
    }
    app.dataset.state.openid = userId
    console.log(app.dataset.state.openid)
    const result = await app.cloud.callModel({
      name: 'user_h4la7ee',
      methodName: 'wedaGetRecords',
      params: {
        "where": [
          {
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          }
        ]
      }, // 方法入參
    });
    console.log(result.total)
    if(result.total ===1){
      app.dataset.state.islogin = true
      app.dataset.state.imageUrl = result.records[0].imageUrl
      app.dataset.state.nickName = result.records[0].nickName
    }
    console.log(app.dataset.state.islogin,app.dataset.state.imageUrl,app.dataset.state.nickName)
    const adminresult = await app.cloud.callModel({
      name: 'admin_qohkmr5',
      methodName: 'wedaGetRecords',
      params: {
        "where": [
          {
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          }
        ]
      }, // 方法入參
    });
    console.log(app.dataset.state.openid)
    console.log(adminresult)
    if(adminresult.total===1){
      app.dataset.state.isadmin = true
    }
    console.log("isadmin",app.dataset.state.isadmin)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

4 後端實現

小程序一般隻能解決前端交互的功能，後端你必須自己開發功能，安裝到服務器上還需要暴露接口。但是一般我們的後臺服務都是需要鑒權的，不可能像網站一樣公開使用。低代碼提供瞭後端的雲函數，直接使用就可以。如果官方提供的不滿足要求，還可以自己編寫代碼

使用 npm 包 request 發送http請求, 詳細使用文檔可以參考
https://github.com/request/request#readme 

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
module.exports =async function (params, context) {
  // params 即為入參定義的結構, 可以在 request 的請求配置中使用 params
  try {
    console.log("cloud",params.templateid)
    const result = await cloud.openapi.subscribeMessage.send({
        "touser": params.openid,
        "page": 'my',
        "lang": 'zh_CN',
        "data": {
          "thing2": {
            "value": params.thing2
          },
          "date3": {
            "value": params.date3
          }
        },
        "templateId": params.templateId,
        "miniprogramState": 'trial'
      })
    console.log("result",result)
    return result
  } catch (err) {
    return err
  }
};

總結

我們今天用瞭一定的篇幅概要的介紹瞭一下使用低碼是如何從0到1構建應用的。當然就像我開篇講的，如果想要熟練開發出應用，找一套體系化的教程，外加老師的輔助還是有必要的。那些想跨行業進入軟件開發領域的，不防嘗試一下低碼的解決方案，希望能給你帶來不一樣的體驗。

到此這篇關於低代碼從0到1創建小程序項目詳解流程的文章就介紹到這瞭,更多相關0到1實現小程序內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：