可多初學(xué)的問(wèn)，微搭學(xué)習(xí)幾個(gè)小時(shí)夠么，幾個(gè)小時(shí)就想學(xué)會(huì)開(kāi)發(fā)，你也過(guò)于樂(lè)觀了吧，這里給出一份學(xué)習(xí)路線圖及所需的時(shí)間。要想熟練用好工具，功夫是要下到位的。
1 學(xué)習(xí)路線
1.1 HTML 語(yǔ)義和結(jié)構(gòu)
學(xué)習(xí)用時(shí)：35–50 小時(shí)
這塊主要是理解組件，微搭的組件其實(shí)和HTML是有一定的對(duì)應(yīng)關(guān)系的，比如我們的普通容器編譯后會(huì)變成DIV標(biāo)簽，文本組件會(huì)變成P標(biāo)簽。
我都組件化開(kāi)發(fā)了為啥還需要掌握HTML了？我們寫(xiě)的自定義方法有時(shí)候要直接操作DOM，那你就得查看源代碼，不懂HTML源代碼就無(wú)從看起
1.2 使用 CSS 布局和美化
學(xué)習(xí)用時(shí)：90–120 小時(shí)
要想寫(xiě)一款好看的小程序是離不開(kāi)CSS的知識(shí)的，這個(gè)得花點(diǎn)精力去練習(xí)，什么效果我用CSS的哪一塊知識(shí)要做到心中有數(shù)
1.3 使用 JavaScript 開(kāi)發(fā)交互
學(xué)習(xí)用時(shí)：135–185 小時(shí)
要掌握到啥程度呢，先開(kāi)始可以學(xué)習(xí)一些基本的，但是隨著你開(kāi)發(fā)的深入，基本上大部分javascript的知識(shí)都用的到，所以這塊投入的精力也是最大的
1.4 小程序API
學(xué)習(xí)用時(shí)：35–50 小時(shí)
比如我們?cè)趯W(xué)習(xí)地圖的API，要根據(jù)當(dāng)前位置信息打開(kāi)地圖
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
success (res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 18
})
}
})
這段代碼在代碼編輯器里是可以直接使用的，但是會(huì)有一些前置要求，比如你要打開(kāi)地圖授權(quán)，要在小程序里申請(qǐng)接口。這些就要去翻閱小程序的API文檔去學(xué)習(xí)
1.5 云開(kāi)發(fā)
學(xué)習(xí)用時(shí)：35–50小時(shí)
有人說(shuō)低代碼是前端開(kāi)發(fā)，那不張嘴就來(lái)么。云開(kāi)發(fā)是低代碼的后端，這一塊要好好學(xué)習(xí)一下操作數(shù)據(jù)庫(kù)，操作文件，主要是要掌握各種API的用法，比如操作文件
import tcb from "tcb-js-sdk";
//第二步，初始化
const app = tcb.init({
env: "your-env-id"
});
/**
第三步，登錄鑒權(quán)流程，此處代碼略，請(qǐng)參考：
https://docs.cloudbase.net/authentication/introduce.html
*/
app
.downloadFile({
fileID: "cloud://a/b/c"
})
.then((res) => {
console.log(res);
});
1.6 微搭
學(xué)習(xí)用時(shí)：135–185 小時(shí)
微搭已經(jīng)成體系了，文檔也比較齊全，哪里不會(huì)的地方看看文檔就可以，比如在低碼編輯器來(lái)操作數(shù)據(jù)庫(kù)
module.exports = async function (params, context) {
const result = await context.callModel({
name: 'example', // 數(shù)據(jù)模型標(biāo)識(shí)，可以前往「數(shù)據(jù)源 - 數(shù)據(jù)模型」列表頁(yè)查看
methodName: 'wedaGetItem', // 數(shù)據(jù)模型方法標(biāo)識(shí)，支持的方法可以前往「數(shù)據(jù)源 - 數(shù)據(jù)模型」的任一數(shù)據(jù)模型詳情頁(yè)查看當(dāng)前模型支持的方法
params: {
where: [{
key: "firstname",
rel: "eq",
val: "張",
}],
},
});
// 在這里返回這個(gè)方法的結(jié)果，需要與出參定義的結(jié)構(gòu)映射
return result;
};
有的說(shuō)我看不懂文檔怎么辦？沒(méi)辦法，要成為低代碼開(kāi)發(fā)者，看懂文檔是必備的技能，我們編程通常都是在思考和查閱中度過(guò)，沒(méi)有這個(gè)技能的你通常都做不了程序員。
2 JavaScript入門(mén)
上邊淺要的說(shuō)了一下學(xué)習(xí)的路線圖，我們下半部分概要的介紹一下javascript這門(mén)語(yǔ)言，有一些基礎(chǔ)的概念是必須要掌握的。
2.1 變量
變量定義
let name;
變量賦值
let name = ‘張三’
變量的類型
| 變量類型 | 示例 |
|---|---|
| 字符串 | '張三’或者"張三" |
| 數(shù)值 | 10 |
| 布爾值 | true 或者 false |
| 數(shù)組 | [1,2,3] |
| 對(duì)象 | {name:"張三”,age:10} |
2.2 注釋
多行注釋
/**
**/
當(dāng)行注釋
//
2.3 運(yùn)算符
| 運(yùn)算符 | 符號(hào) |
|---|---|
| 加 | + |
| 減、乘、除 | - * \ |
| 賦值運(yùn)算符 | = |
| 等于 | === |
| 不等于 | !== |
| 取非 | ! |
2.4 條件語(yǔ)句
根據(jù)條件的真假來(lái)執(zhí)行不同的代碼片段
let num = 10
if(num>10){
console.log("大于10");
}else{
console.log("比10小或者等于10");
}
2.5 函數(shù)
函數(shù)是對(duì)代碼的一種封裝，主要是為了復(fù)用，利用function關(guān)鍵字聲明一個(gè)函數(shù)，函數(shù)有參數(shù)，有返回值，比如我們定義一個(gè)求和的函數(shù)
function sum (a,b){
return a+b;
}
調(diào)用的時(shí)候用函數(shù)名加小括號(hào)，并且傳入需要的參數(shù)
sum(2,3);
2.6 事件
為網(wǎng)頁(yè)添加交互行為，比如給按鈕增加點(diǎn)擊事件，低代碼中已經(jīng)將事件封裝到了組件中，通常都是可視化的進(jìn)行設(shè)置
3 示例
我們開(kāi)發(fā)一個(gè)示例，要求用戶輸入內(nèi)容，然后在頁(yè)面上顯示信息，先往頁(yè)面添加一個(gè)文本組件
然后在代碼區(qū)創(chuàng)建一個(gè)JavaScript方法，代碼如下
export default function() {
let myName = prompt('請(qǐng)輸入你的名字。');
//console.log("myName",myName)
if(!myName) {
$page.handler.setUserName();
} else {
localStorage.setItem('name', myName);
console.log(myName)
//$w.text1.text = 'Mozilla 酷斃了，' + myName;
}
$page.widgets.text1.text = '微搭 酷斃了，' + myName;
}
選中頁(yè)面組件，我們讓加載的時(shí)候調(diào)用這個(gè)方法
總結(jié)
學(xué)習(xí)微搭呢，當(dāng)然是要從語(yǔ)言開(kāi)始學(xué)起了，因?yàn)檫壿嫴糠质且看a寫(xiě)的，不會(huì)語(yǔ)言往往你寫(xiě)不出啥應(yīng)用來(lái)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-527457.html
好在低代碼開(kāi)發(fā)比較聚焦，不需要學(xué)這又學(xué)那，你只需要掌握基本的JavaScript的語(yǔ)法就可以上手開(kāi)發(fā)了，這無(wú)疑會(huì)節(jié)約大量的時(shí)間。就是在練習(xí)的時(shí)候要結(jié)合軟件，具體拆解一下，不是原生代碼你貼進(jìn)來(lái)就可以用的。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-527457.html
到了這里，關(guān)于微搭學(xué)習(xí)路線圖，JavaScript入門(mén)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
