Loading...
墨滴

鲸梦编程

2021/11/06  阅读:42  主题:默认主题

学习笔记记录分享会用

一.微信小程序

(1)配置小程序

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.jsonwindow 中相同的配置项。

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html【配置项文档】

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

全局配置 | 微信开放文档 (qq.com)【配置项文档】

sitemap 配置

可对特定页面的索引进行关闭

sitemap 配置 | 微信开放文档 (qq.com)

(2)小程序框架

介绍

逻辑层(App Service)和 视图层(View)

WXMLWXSS,以及基于 JavaScript 的逻辑层框架

场景值

场景值用来描述用户进入小程序的路径。

逻辑层

  • 注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

详细的参数含义和使用请参考 App 参考文档

  • 注册页面

对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

详细的参数含义和使用请参考 Page 参考文档

  • 页面生命周期

生命周期 | 微信开放文档 (qq.com)

  • 页面路由

在小程序中所有页面的路由全部由框架进行管理。

二.javaScript慕课

第一章javascript初探

  • JavaScript介绍

    1. 解释型脚本语言

    JavaScript是一种解释型脚本语言,在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释,大量节省客户端与服务器端进行数据交互的时间。

    2. 基于对象的语言

    JavaScript语言是基于对象的(Object-Based),JavaScript提供了大量的内置对象,如:String、Number、Boolean、 Array、Date、Math、RegExp等等。但它还是具有一些面向对象的基本特征,可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,编写功能强大的Web文档。

    3. 简单性

    JavaScript基本结构类似C语言,采用小程序段的方式编程,并提供了简易的开发平台和便捷的开发流程,就可以嵌入到HTML文档中供浏览器解释执行。同时JavaScript的变量类型是弱类型,不强制检查变量的类型,也就是说可以不定义其变量的类型。

    4. 动态性

    JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用事件驱动的方式进行的。所谓事件就是指在主页(homepage)中执行了某种操作所产生的动作,例如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应,即事件驱动。

    5. 跨平台性

    JavaScript依赖于浏览器本身,与操作系统环境无关,只要操作系统能运行浏览器并且浏览器支持JavaScript,就可以正确执行。

  • Hbuilder开发工具

    HBuilder下载地址:在HBuilder官网https://www.dcloud.io/hbuilderx.html点击免费下载。

  • JavaScript的使用方法

    JavaScript代码的位置

    img
    img

    注意: JavaScript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。JavaScript代码放到body的尾部性能会更好。

  • JavaScript常用的输出

    1.背景基础知识

    JavaScript对象通过点"."来访问它的方法和属性,window是对象,document也是对象; onclick、onload是事件属性,onclick表示单击事件,onload表示页面加载完毕时; document.getElementById('div1'); 表示访问document对象的getElementById方法; window:代表浏览器中一个打开的窗口。 document对象:代表整个HTML 文档,可用来访问页面中的所有元素。document是window的一个子对象。

    2.输出示例

    <script type="text/javascript">document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。</script>
    <script type="text/javascript">
       var mynum = 30;
       alert("hello!");
       alert(mynum);
    </script>
    <script>

    a = 5;
     b = 6;
     c = a + b;
     console.log(c);

    </script>
    /*直接操作文档,最为推荐*/
    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title> Sample Page!</title> 

    </head>  

    <body>  

    <p id="demo">我的第一个段落</p> 

    <script>
     document.getElementById("demo").innerHTML = "段落已修改。";

    </script> 

    </body>
     </html>

第二章JavaScript语言基础

(1)第一部分-数据类型

  • 数值型

    1.JavaScript和其他程序设计语言(例如C语言或者Java语言)的不同之处在于他并不区分整型数值和浮点数值。

    2.toFixed() 方法可把number四舍五入为指定小数位数的数字,返回值为string类型。

    var num = 3.456789; var n=num.toFixed(); //将一个数字,不留任何小数:n 的值为3

    var num = 3.456789;

    var n=num.toFixed(2); //将一个数字,留2位小数:n 的值为3.46

    alert(typeof n); // string

    3.进制知识

    0x8f //8*16+15=143(基数为10)

    0566 //564+68+6=374(基数为10)

    详细JavaScript及框架应用_中国大学MOOC(慕课) (icourse163.org)

  • 字符串型

    例如:单引号定界的字符串中可以包含双引号,代码如下:

    'pass="mypass" '

    例如:双引号定界的字符串中可以包含单引号,代码如下:

    "You can call her 'Rose '"

    **说明:**JavaScript与C、Java不同的是,它没有char这样的单字符数据类型。要表示单个字符,必须使用长度为1的字符串。

  • 布尔型

    数字0和NAN是false其余为true

    字符串长度0为false其余为true

    代码相关:

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
     </head>
     <body>
      <script>
       //   var m=1;
       //   if(m==1)
       //    alert("条件为true,执行m==1")
       //   else
       //     alert("条件为false,执行m!=1")

       var s = NaN;
       var s2 = Boolean(s);
       alert(typeof s2);
       alert(s2);
       if (s)
        alert("条件为true")
       else
        alert("条件为false")
      
    </script>
     </body>
    </html>
  • 特殊数据类型

    1. 转义字符

    以反杠开头的,不可显示的特殊字符通常称为控制字符,也被称为转义字符。通过转义字符可以在字符串中添加不可以显示的特殊字符,或者避免引号匹配混乱。JavaScript常用的转义字符如表所示。

    ​ 表 JavaScript常用的转义字符

    转义字符 描述 转义字符 描述
    \b 退格 \v 跳格(Tab、水平)
    \n 回车换行 \r 换行
    \t Tab符号 \ 反斜杠
    \f 换页 \OO 八进制整数,范围00~77
    \’ 单引号 \xHH 十六进制整数,范围00~FF
    \” 双引号 \uhhhh 十六进制编码的Unicode字符

    在document.write( )语句中使用转义字符时,只有将其放在格式化文本标签

    中才会起作用。如: document.write("
       
    努力学习\nJavaScript语言!
    ");

    2. 未定义值

    未定义类型的变量是undefined,表示变量还没有赋值(如var m;),或者赋予一个不存在的属性值(如var m=String.noproperty;)。

    此外,JavaScript中还有一种特殊类型的数字常量NaN,即“非数字”。当程序由于某种原因计算错误后,将产生一个没有意义的数字,此时JavaScript返回的数值就是NaN。

    3. 空值

    JavaScript中的关键字null是一个特殊的值,它表示值为空,用于定义空的或者不存在的引用。这里必须注意的是,null不等同与空字符串("")和0。.

    由此可见,null和undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值。

    4. 复合数据类型:Object类型

    值为基本数据类型的组合如:数组,json等,如下:   var person = { // json        'name': 'Bob',       'age': 20,       'tags': ['js', 'web', 'mobile'],       'city': 'Beijing',       'hasCar': true,       'zipcode': null      };

    for(var o in person)

    ​ alert(o+ " " +person[o]); // json的遍历

    ​ var json = { // json

    ​ "employees": [{

    ​ "firstName": "John",

    ​ "lastName": "Doe"

    ​ }, {

    ​ "firstName": "Anna",

    ​ "lastName": "Smith"

    ​ }, {

    ​ "firstName": "Peter",

    ​ "lastName": "Jones"

    ​ }]

    ​ }

    json=json.employees;

    ​ for(var i = 0; i < json.length; i++) { // json的遍历

    ​ alert(json[i].firstName + " " + json[i].lastName)

    ​ }

  • json数据类型的遍历

    json格式的数据越来越多的在web开发中起到重要作用。下面介绍对于json对象和数组经常用到解析方法。

    var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”gender”:” 女”,”old”:26};

    var arr = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];

    1、对于一个json对象,已知其json中的某个键的值,求对应的值:

    格式一、 obj.name

    格式二、 obj.['name']

    2、对于json对象,需要遍历json对象的所有数据:

    遍历方法:

    for(var p in obj){

    str = str+obj[p]+’,’;//这里p为键,obj[p]为值

    return str;

    }

    3.实例

    var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

    obj = JSON.parse(text);

    document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

    更多json教程 JSON 教程

  • 数据类型的自动转换

    当JavaScript尝试操作一个"错误"的数据类型时,会自动转换为"正确"的数据类型。以下输出结果不是你所期望的:

    5 + null // 返回 5 null 转换为 0

    "5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5

    "5"* 2 // 返回 10 "5" 转换为 5

    "6" / 2 // 返回 3 "6" 转换为 6

    总结:当字符串与其它类型用+连接,其它类型会转为字符串,其它的运算符-,*,/,%都会转换成Number类型

  • typeof的用法

    typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object

    typeof undefined // undefined typeof null // object

(2)第二部分-变量和函数

  • JavaScript变量

    1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:

    正确:                mysum                 _mychar              $numa1          
    错误:   6num  //开头不能用数字   %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)   sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 

    2.变量名区分大小写,如:A与a是两个不同变量。

    3.不允许使用JavaScript关键字和保留字做变量名。

    img
    img
  • JavaScript函数

    function 函数名({      函数代码; }
    function add2(){    var sum = 3 + 2;    alert(sum); }
    <script type="text/javascript">   function add2(){     sum = 3 + 2;     alert(sum);   }   add2(); </script>
  • 函数的使用实现点亮灯泡

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>点亮灯泡</title>     
     </head>
     <body>
         <img id="myimage" src="img/pic_bulboff.gif" onclick="changeImage()" alt="my image gallery">
      <p>点击灯泡就可以打开或关闭这盏灯</p> 
      <script>
       function changeImage({
        element = document.getElementById('myimage')

        if (element.src.match("bulbon")) {
         element.src = "img/pic_bulboff.gif";
        } else {
         element.src = "img/pic_bulbon.gif";
        }
       }
      
    </script> 
     </body>
    </html>

鲸梦编程

2021/11/06  阅读:42  主题:默认主题

作者介绍

鲸梦编程