微搭学习路线图,JavaScript入门

简介: 微搭学习路线图,JavaScript入门


可多初学的问,微搭学习几个小时够么,几个小时就想学会开发,你也过于乐观了吧,这里给出一份学习路线图及所需的时间。要想熟练用好工具,功夫是要下到位的。

1 学习路线

1.1 HTML 语义和结构

学习用时:35–50 小时

这块主要是理解组件,微搭的组件其实和HTML是有一定的对应关系的,比如我们的普通容器编译后会变成DIV标签,文本组件会变成P标签。

我都组件化开发了为啥还需要掌握HTML了?我们写的自定义方法有时候要直接操作DOM,那你就得查看源代码,不懂HTML源代码就无从看起

1.2 使用 CSS 布局和美化

学习用时:90–120 小时

要想写一款好看的小程序是离不开CSS的知识的,这个得花点精力去练习,什么效果我用CSS的哪一块知识要做到心中有数

1.3 使用 JavaScript 开发交互

学习用时:135–185 小时

要掌握到啥程度呢,先开始可以学习一些基本的,但是随着你开发的深入,基本上大部分javascript的知识都用的到,所以这块投入的精力也是最大的

1.4 小程序API

学习用时:35–50 小时

比如我们在学习地图的API,要根据当前位置信息打开地图

wx.getLocation({
 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   wx.openLocation({
     latitude,
     longitude,
     scale: 18
   })
 }
})

这段代码在代码编辑器里是可以直接使用的,但是会有一些前置要求,比如你要打开地图授权,要在小程序里申请接口。这些就要去翻阅小程序的API文档去学习

1.5 云开发

学习用时:35–50小时

有人说低代码是前端开发,那不张嘴就来么。云开发是低代码的后端,这一块要好好学习一下操作数据库,操作文件,主要是要掌握各种API的用法,比如操作文件

import tcb from "tcb-js-sdk";
//第二步,初始化
const app = tcb.init({
  env: "your-env-id"
});
/**
  第三步,登录鉴权流程,此处代码略,请参考:
  https://docs.cloudbase.net/authentication/introduce.html
*/
app
  .downloadFile({
    fileID: "cloud://a/b/c"
  })
  .then((res) => {
    console.log(res);
  });

1.6 微搭

学习用时:135–185 小时

微搭已经成体系了,文档也比较齐全,哪里不会的地方看看文档就可以,比如在低码编辑器来操作数据库

module.exports = async function (params, context) {
  const result = await context.callModel({
    name: 'example', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看
    methodName: 'wedaGetItem', // 数据模型方法标识,支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
    params: {
      where: [{
        key: "firstname",
        rel: "eq",
        val: "张",
      }],
    },
  });
  // 在这里返回这个方法的结果,需要与出参定义的结构映射
  return result;
};

有的说我看不懂文档怎么办?没办法,要成为低代码开发者,看懂文档是必备的技能,我们编程通常都是在思考和查阅中度过,没有这个技能的你通常都做不了程序员。

2 JavaScript入门

上边浅要的说了一下学习的路线图,我们下半部分概要的介绍一下javascript这门语言,有一些基础的概念是必须要掌握的。

2.1 变量

变量定义

let name;

变量赋值

let name = ‘张三’

变量的类型

变量类型 示例
字符串 '张三’或者"张三"
数值 10
布尔值 true 或者 false
数组 [1,2,3]
对象 {name:"张三”,age:10}

2.2 注释

多行注释

/**

**/

当行注释

//

2.3 运算符

运算符 符号
+
减、乘、除 - * \
赋值运算符 =
等于 ===
不等于 !==
取非 !

2.4 条件语句

根据条件的真假来执行不同的代码片段

let num = 10
if(num>10){
   console.log("大于10");
}else{
   console.log("比10小或者等于10");
}

2.5 函数

函数是对代码的一种封装,主要是为了复用,利用function关键字声明一个函数,函数有参数,有返回值,比如我们定义一个求和的函数

function sum (a,b){
  return a+b;
}

调用的时候用函数名加小括号,并且传入需要的参数

sum(2,3);

2.6 事件

为网页添加交互行为,比如给按钮增加点击事件,低代码中已经将事件封装到了组件中,通常都是可视化的进行设置

3 示例

我们开发一个示例,要求用户输入内容,然后在页面上显示信息,先往页面添加一个文本组件

然后在代码区创建一个JavaScript方法,代码如下

export default function() {
let myName = prompt('请输入你的名字。');
//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;
}

选中页面组件,我们让加载的时候调用这个方法

总结

学习微搭呢,当然是要从语言开始学起了,因为逻辑部分是要靠代码写的,不会语言往往你写不出啥应用来。


好在低代码开发比较聚焦,不需要学这又学那,你只需要掌握基本的JavaScript的语法就可以上手开发了,这无疑会节约大量的时间。就是在练习的时候要结合软件,具体拆解一下,不是原生代码你贴进来就可以用的。

相关文章
|
28天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
210 2
|
8天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
8天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
13 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
45 10
|
1月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
36 4
js学习--制作猜数字
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
44 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
14天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
36 4
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
22 1