低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程
我們使用代碼編程的時(shí)候,前端是寫(xiě)標(biāo)簽,后端是寫(xiě)if/else、for循環(huán)來(lái)執(zhí)行邏輯處理。
那低代碼如何體系化的學(xué)習(xí)呢?這里我們按照代碼方式學(xué)習(xí)做個(gè)對(duì)照。
1 搭建開(kāi)發(fā)工具
一般如果我們使用微信開(kāi)發(fā)者工具,開(kāi)發(fā)小程序需要安裝工具。低碼工具不需要安裝,是在線進(jìn)行編程。但和開(kāi)發(fā)者工具一樣,低碼也是需要綁定小程序的。我們?cè)陂_(kāi)發(fā)者工具里一般是需要配置自己小程序的appid,如果使用了云開(kāi)發(fā)的,還需要開(kāi)通云開(kāi)發(fā)。
我們使用低碼開(kāi)發(fā)需要在小程序認(rèn)證那塊,綁定自己的小程序。
我這里一個(gè)綁定成功了,一個(gè)綁定失敗了。失敗的原因是小程序和我們的低碼賬號(hào)不是同主體,意思是必須以你自己的微信號(hào)申請(qǐng),不能綁定別人的小程序。
2 創(chuàng)建項(xiàng)目
我們使用微信開(kāi)發(fā)者工具,打開(kāi)工具的時(shí)候就要求創(chuàng)建項(xiàng)目,所謂的創(chuàng)建項(xiàng)目是在你本地新建一個(gè)文件夾,然后按照小程序項(xiàng)目的要求生成對(duì)應(yīng)的目錄結(jié)構(gòu)。比如有js、json、wxml、wxss等。
低碼中我們講的創(chuàng)建項(xiàng)目是指創(chuàng)建應(yīng)用,一個(gè)應(yīng)用就相當(dāng)于一個(gè)項(xiàng)目。不同于小程序,低碼的外延更廣,可以創(chuàng)建PC端的項(xiàng)目,也可以創(chuàng)建移動(dòng)端的項(xiàng)目。移動(dòng)端的項(xiàng)目不僅可以創(chuàng)建小程序,也可以創(chuàng)建H5。
而且比小程序方便的是,低碼是可以根據(jù)模板創(chuàng)建項(xiàng)目的。所謂的模板是指事先已經(jīng)開(kāi)發(fā)好的項(xiàng)目,就像我們從github上clone一樣。當(dāng)你clone完畢后整個(gè)工程的源代碼就都下載到了本地。低碼中依據(jù)模板新建是將做好的項(xiàng)目安裝到你自己的空間里。這樣你就有了一套成熟的模板,可以在此基礎(chǔ)上進(jìn)行修改。這樣做無(wú)疑大大的提高了開(kāi)發(fā)效率。
3 功能開(kāi)發(fā)
微信小程序獨(dú)創(chuàng)了一套語(yǔ)法,分別是wxjs、wxml、wxss。如果我們希望開(kāi)發(fā)難免增加了不少難度,因?yàn)橛值脝为?dú)學(xué)習(xí)一套語(yǔ)法。低碼的話組件是使用的react,低碼編輯器里是用的javascript。后臺(tái)方法是用的云函數(shù),學(xué)習(xí)nodejs即可??傮w你只要學(xué)會(huì)了Js開(kāi)發(fā)低碼應(yīng)用是沒(méi)啥問(wèn)題的。
低碼中也有頁(yè)面的概念,但是是可視化創(chuàng)建的。
頁(yè)面開(kāi)發(fā)的時(shí)候完全是可視化的拖拽,并不需要學(xué)習(xí)啥語(yǔ)法知識(shí)
如果需要給組件設(shè)置事件的,可以使用平臺(tái)方法,也可以使用自定義方法
自定義方法是按照J(rèn)s語(yǔ)法進(jìn)行編程
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 } ] }, // 方法入?yún)? }); 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 } ] }, // 方法入?yún)? }); 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 后端實(shí)現(xiàn)
小程序一般只能解決前端交互的功能,后端你必須自己開(kāi)發(fā)功能,安裝到服務(wù)器上還需要暴露接口。但是一般我們的后臺(tái)服務(wù)都是需要鑒權(quán)的,不可能像網(wǎng)站一樣公開(kāi)使用。低代碼提供了后端的云函數(shù),直接使用就可以。如果官方提供的不滿足要求,還可以自己編寫(xiě)代碼
使用 npm 包 request 發(fā)送http請(qǐng)求, 詳細(xì)使用文檔可以參考
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 即為入?yún)⒍x的結(jié)構(gòu), 可以在 request 的請(qǐng)求配置中使用 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 } };
總結(jié)
我們今天用了一定的篇幅概要的介紹了一下使用低碼是如何從0到1構(gòu)建應(yīng)用的。當(dāng)然就像我開(kāi)篇講的,如果想要熟練開(kāi)發(fā)出應(yīng)用,找一套體系化的教程,外加老師的輔助還是有必要的。那些想跨行業(yè)進(jìn)入軟件開(kāi)發(fā)領(lǐng)域的,不防嘗試一下低碼的解決方案,希望能給你帶來(lái)不一樣的體驗(yàn)。
到此這篇關(guān)于低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程的文章就介紹到這了,更多相關(guān)0到1實(shí)現(xiàn)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果的圖文教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Ionic3 UI組件之a(chǎn)utocomplete詳解
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之a(chǎn)utocomplete的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06發(fā)一個(gè)數(shù)據(jù)過(guò)濾的代碼,很簡(jiǎn)單,有用的著的拿去
發(fā)一個(gè)數(shù)據(jù)過(guò)濾的代碼,很簡(jiǎn)單,有用的著的拿去...2007-02-02javascript生成隨機(jī)大小寫(xiě)字母的方法
這篇文章主要介紹了javascript生成隨機(jī)大小寫(xiě)字母的方法,需要的朋友可以參考下2014-02-02JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法,通過(guò)getElementById獲取指定行再使用deleteRow方法來(lái)實(shí)現(xiàn)刪除行的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03微信小程序開(kāi)發(fā)常見(jiàn)問(wèn)題及解決方案
這篇文章主要介紹了微信小程序開(kāi)發(fā)常見(jiàn)問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07