微信小程序开发

JavaScript 基础

DOM & BOM

参考：

PHP中文网-长期闲置：深入了解JavaScript中的DOM与BOM

JavaScript 三大部件组成：

ECMAscript，ECMAscript更像一个规定，规定了各个浏览器怎么样去执行JavaScript的语法
DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口，为了能使JavaScript操作Html
BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口，BOM为JavaScript提供了一种控制浏览器行为的”方法”

DOM及其相关操作

一目明了DOM树：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_demo</title>
</head>
<body>
    <p>
        <a href="https://ding-f.gitee.io/">铸鼎_</a>
    </p>
</body>
</html>

以上可展示为DOM树：

DOM树

JavaScript 可以通过document.直接可以对DOM树进行灵活的操作（增删改查），以实现网页的变换效果（详细请看参考资料）：

通过元素的id、name、class、签名等获取节点（元素）返回一数组/对象
传递属性名(class、id、href等)，获取属性值
获取某元素父节点、子节点、按索引获取子节点、同级节点
设置属性值，传递进去属性名以及要设置的属性值
创建DOM节点，传递元素类型
创建属性节点，传递对应属性名
向某个节点后面添加一个节点，传入的节点类型
向某个节点内部已存在节点前插入节点，传入节点类型
删除某个节点的内部节点，传入节点类型

BOM及其相关操作

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

BOM与DOM类似，BOM也有一个树结构：

BOM树

window 对象

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

常见属性和方法：

属性/方法	含义
opener	当前窗口的父窗口
length	窗口中的框架数
document	窗口中当前显示的文档对象
alert(string)	创建一个警告对话框，显示一条信息
close()	关闭窗口
confirm()	创建一个需要用户确认的对话框
open(url,name,[options])	打开一个新窗口并返回新 window 对象
prompt(text,defaultInput)	创建一个对话框要求用户输入信息
setInterval(expression,milliseconds)	经过指定时间间隔计算一个表达式
setInterval(function,millis enconds,[arguments])	经过指定时间间隔后调用一个函数
setTimeout(expression,milli seconds)	在定时器超过后计算一个表达式
setTimeout(expression,milli seconds,[arguments])	在定时器超过时后计算一个函数

其中有一个alert()，可能会引起大家的注意，其实就是我们平常使用的浏览器弹窗，只不过window有两种调用方式，我们常用第一种：

window.属性 / window.方法()
不加window，直接可以调用.属性 / .方法()

location对象

location对象是window对象的一个属性，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

常见的属性和方法：

属性/方法	内容
host	主机名：端口号
hostname	主机名
href	整个 URL
pathname	路径名
port	端口号
protocol	协议部分
search	查询字符串
reload()	重载当前 URL
repalce()	用新的 URL 替换当前页面

location对象不仅仅是window对象的一个属性，还是document对象的一个属性，即：

1	window.location = location = document.location

history对象

history 对象是 window 对象的属性，它保存着用户上网的记录，这个记录的时间戳是从窗口被打开的那一刻算起。

常见属性和方法：

属性/方法	描述
length	history 对象中的记录数
back()	前往浏览器历史条目前一个 URL，类似后退
forward()	前往浏览器历史条目下一个 URL，类似前进
go(num)	浏览器在 history 对象中向前或向后

navigator对象

navigator对象，是BOM中识别客户端浏览器的一个window属性。

属性	说明
appName	完整的浏览器名称和版本信息
platform	浏览器所在的系统平台
plugins	浏览器中安装的插件信息的数组
userAgent	浏览器的用户代理字符串
userLanguage	操作系统的默认语言

导入代码

导入JS脚本函数调用

1 2	var Api = require('../../utils/api.js'); var util = require('../../utils/util.js');

Api.js

var HOST_URI_WATCH_LIFE_JSON = 'http://' + domain + '/schoolwall/'; 

get_homeconfig()
  {
    // http://0.0.0.0:3000/schoolwall/options/homeconfig
    // https://www.watch-life.net/wp-json/watch-life-net/v1/options/homeconfig
    var url = HOST_URI_WATCH_LIFE_JSON;
    url += "options/homeconfig";
    return url;
  }

调用一个Api.js脚本中的函数：

1
2
3

var Api = require('../../utils/api.js');

Api.get_homeconfig();		//返回组成的URL

导入参数配置文件

参数配置文件：


var DOMAIN = "0.0.0.0:3000";
var WEBSITENAME="安康学院校园墙"; 
var PAGECOUNT='10'; //每页文章数目

const enableScanLogin =false
//////////////////////////////////////////////////////

const minapperVersion=4.12
const minapperSource="free"


export default {
  getDomain: DOMAIN,
  getWebsiteName: WEBSITENAME,  
  getPageCount: PAGECOUNT,
  enableScanLogin,
  minapperVersion,
  minapperSource
}

导入参数配置：

1 2	import config from '../../utils/config.js'

引用参数：

1	var pageCount = config.getPageCount;

直接使用：

if (response.data.length < pageCount) {
                  self.setData({
                    isLastPage: true,
                    isLoading: false
                  });
                }

参考 & 分析

为了稳定性，选择了vue2作为本项目的前端框架。

参考：

掘金-逐步前行：分析小程序的设计方案，优劣势，以及如何技术选型

掘金-kiki_：小程序技术选型

掘金-小染Jun：这可能是最好、最详细的VSCode开发uni-app教程吧

微信开放社区-编程小石头：企业微信小程序的注册图文详解

DCLOUD社区-DCloud_UNI_CHB：跨端框架深度评测：微信原生、wepy、mpvue、uni-app、taro、chameleon

微信官方文档：小程序框架 /视图层 /WXSS

博客园-不是于彬：React与Vue的对比

小程序数据交互设计

渲染层：单线程，使用WebView 进行渲染，但一个小程序存在多个页面，可能始终是单线程的，只是切换页面时一个线程暂停一个线程继续
逻辑层：单线程，逻辑层采用JsCore线程运行JS脚本
其中WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层
渲染层和逻辑层之间的通讯更接近react native，或者是flutter的设计理念，此设计理念就是，逻辑层与展示层分开，通过中间JSBridge或者是其他存储技术，或者Native本身，完成两者的通信，形成一个逻辑与展示的互相驱动。

小程序运行环境

逻辑层，在IOS中是使用JavaScriptCore为宿主环境，而在安卓中，使用了V8引擎。就连渲染层，都属于定制的内核。这中间不妨包含很多微信内部的封装。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

即使是在微信自带的开发工具上开发，都无法完成跟客户端一模一样的体验。这里微信只是模拟客户端，搭建了一个NWJS环境方便开发调试。

于是：安卓小程序，IOS小程序会有一些差异？或者为什么本地开发时，一些功能不可使用。而App Service，是要依赖于微信客户端定制内核的webview才能执行。看到这里，你是否了解为什么小程序无法在浏览器运行？

特殊单位

常用小程序代码示例

for循环

参考：

微信官方文档：列表渲染

wx:key 的值以两种形式提供

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

听说指定可以提升wx:for性能。

代码示例请看参考链接。

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

![image-20220528111000950](/Users/fuding/Library/Application Support/typora-user-images/image-20220528111000950.png)
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

![image-20220528111201226](/Users/fuding/Library/Application Support/typora-user-images/image-20220528111201226.png)