微信小程序-----基础加强(二)

  • 能够知道如何安装和配置vant-weapp 组件库
  • 能够知道如何使用MobX实现全局数据共享
  • 能够知道如何对小程序的API 进行 Promise 化
  • 能够知道如何实现自定义tabBar 的效果

一.使用 npm 包

小程序对 npm 的支持与限制

目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm 包有如下 3 个限制:

  • ① 不支持依赖于 Node.js 内置库的包
  • ② 不支持依赖于浏览器内置对象的包
  • ③ 不支持依赖于 C++ 插件的包

总结:虽然 npm 上的包有千千万,但是能供小程序使用的包却“为数不多”。

Vant Weapp

1. Vant Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是

MIT 开源许可协议,对商业使用比较友好。

官方文档地址:https://youzan.github.io/vant-weapp

2. 安装 Vant 组件库

在小程序项目中,安装 Vant 组件库主要分为如下 3 步:

  • 通过 npm 安装(建议指定版本为@1.3.3)
  • 先创建npm包
  • 安装vant
  • 在此处可能会出现权限问题,用管理员身份打开终端进入到相应的文件夹中可以安装了
  • 构建 npm 包
  • 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
  • 构建完成之后,要在本地设置中点击使用npm模块
  • ③ 修改 app.json

详细的操作步骤,大家可以参考 Vant 官方提供的快速上手教程:

https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

3. 使用 Vant 组件

安装完 Vant 组件库之后,可以在 app.json 的 usingComponents 节点中引入需要的组件,即可在 wxml 中 直接使用组件。示例代码如下:

app.json"usingComponents": {"van-button": "@vant/weapp/button/index"} home.wxml
<van-button type="primary">主要按钮</van-button>

如果报错显示找不到vant组件,可以重新下载一下 

4. 定制全局主题样式

Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法,请参考 MDN 文档:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

 自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。比如,--main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束,并从其父级继承其值。


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./01.css" /><style>html {/* 定义CSS变量 */--main-color: #C00000;}.box1, .box2 {/* background-color: #C00000; */background-color: var(--main-color);}.box3 {/* color: #C00000; */color: var(--main-color);}</style><body><div class="container1"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div><div class="container2"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div></body>
</html>

css

body {display: flex;
}
.container1,
.container2 {flex: 1;
}
div {line-height: 120px;border: 1px solid #ccc;margin: 20px;text-align: center;border-radius: 4px;
}
5. 定制全局主题样式

在 app.wxss 中,写入 CSS 变量,即可对全局生效:

page{/* 定制警告按钮的背景颜色和边框颜色 */--button-danger-background-color: #C00000;--button-danger-border-color: #D60000;
}

 

所有可用的颜色变量,请参考 Vant 官方提供的配置文件:

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise化

1. 基于回调函数的异步 API 的缺点

默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方 式调用:

缺点:容易造成回调地狱的问题,代码的可读性、维护性差!

2. API Promise 化

API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于 Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题。

3. 实现 API Promise 化

在小程序中,实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装 和使用步骤如下:

下载 miniprogram-api-promise

npm install --save miniprogram-api-promise@1.0.4

 

安装完成之后需要重新定义包,把项目中的miniprogram_npm文件删除,然后重新点击工具 =>构建npm重新构建miniprogram_npm文件,里面包含miniprogram-api-promise插件

//app.js
// 在小程序入口文件中(app.js),只需要调用一次promiseifyAll()方法,
// 即可实现异步ApI的promise化
import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)

4. 调用 Promise 化之后的异步 API

home.wxml
<van-button type="danger" bindtap="getInfo">危险按钮</van-button>home.js
async getInfo() {const {data: res} = await wx.p.request({method: 'GET',url: 'https://www.escook.cn/api/get',data: {name: 'zs',age: 20}})console.log(res)},

二.全局数据共享

全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。 开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。

小程序中的全局数据共享方案

在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:

  • mobx-miniprogram 用来创建 Store 实例对象
  • mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用

MobX

1. 安装 MobX 相关的包

在项目中运行如下的命令,安装 MobX 相关的包:

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。

2. 创建 MobX 的 Store 实例

创建store/store.js

3. 将 Store 中的成员绑定到页面中

message.js 

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.storeBindings = createStoreBindings(this, {store,fields: ['numA', 'numB', 'sum'],actions: ['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.detroyStoreBindings()},
4. 在页面上使用 Store 中的成员

message.wxml 

<!--pages/message/message.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">
numA + 1
</van-button><van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">
numA - 1
</van-button>

message.js

  btnHandler1(e) {// console.log(e)this.updateNum1(e.target.dataset.step)},

 

5. 将 Store 中的成员绑定到组件中

创建组件可以参考之前的微信小程序-----基础加强-CSDN博客 

创建components文件夹存放组件,在此文件夹下创建number组件,在全局设置app.json中定义组件

在页面中调用组件

numbers.js

// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Component({behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,fields: {numA: 'numA',numB: 'numB',sum: 'sum'},actions: {updateNum2: 'updateNum2'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})
6. 在组件中使用 Store 中的成员

numbers.wxml 

<!--components/numbers/numbers.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>

 numbers.js

// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Component({behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,fields: {numA: 'numA',numB: 'numB',sum: 'sum'},actions: {updateNum2: 'updateNum2'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {btnHandler2(e) {this.updateNum2(e.target.dataset.step)}}
})

 

三.分包

分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用 时按需进行加载。

分包的好处

对小程序进行分包的好处主要有以下两点:

  • 可以优化小程序首次启动的下载时间
  • 在多团队共同开发时可以更好的解耦协作

分包前项目的构成

分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的 下载时间。

分包后项目的构成

分包后,小程序项目由 1 个主包 + 多个分包组成:

  • 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
  • 分包:只包含和当前分包有关的页面和私有资源

分包的加载规则

① 在小程序启动时,默认会下载主包并启动主包内页面

  • tabBar 页面需要放到主包中

② 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

  • 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

分包的体积限制

目前,小程序分包的大小有以下两个限制:

  • 整个小程序所有分包大小不超过 16M(主包 + 所有分包)
  • 单个分包/主包大小不能超过 2M

使用分包

1. 配置方法

在全局配置文件app.json中的subpackages节点中声明分包结构

"subPackages": [ {"root":"pgA","pages":["pages/cat/cat","pages/dog/dog"]},{"root":"pgB","name":"pack2","pages":["pages/apple/apple","pages/banana/banana"]}],

 下面可以看到分包的大小,单个分包/主包大小不能超过 2M

 

2. 打包原则
  • ① 小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中
  • ② 主包也可以有自己的 pages(即最外层的 pages 字段)
  • ③ tabBar 页面必须在主包内
  • ④ 分包之间不能互相嵌套
3. 引用原则
  • ① 主包无法引用分包内的私有资源
  • ② 分包之间不能相互引用私有资源
  • ③ 分包可以引用主包内的公共资源

独立分包

1.独立分包

独立分包本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行。

2. 独立分包和普通分包的区别

最主要的区别:是否依赖于主包才能运行

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下,独立运行
3. 独立分包的应用场景

开发者可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:

  • 当小程序从普通的分包页面启动时,需要首先下载主包
  • 独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度

注意:一个小程序中可以有多个独立分包。

4. 独立分包的配置方法

 

5. 引用原则

独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!例如:

  • ① 主包无法引用独立分包内的私有资源
  • ② 独立分包之间,不能相互引用私有资源
  • ③ 独立分包和普通分包之间,不能相互引用私有资源
  • ④ 特别注意:独立分包中不能引用主包内的公共资源

分包预下载

1.分包预下载

分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包 页面时的启动速度。

2. 配置分包的预下载

预下载分包的行为,会在进入指定的页面时触发。在 app.json 中,使用 preloadRule 节点定义分包的预下载 规则,示例代码如下:

3. 分包预下载的限制

同一个分包中的页面享有共同的预下载大小限额 2M,例如:

案例 - 自定义tabBar

1. 案例效果

在此案例中,用到的主要知识点如下:

  • 自定义组件
  • Vant 组件库
  • MobX 数据共享
  • 组件样式隔离
  • 组件数据监听器
  • 组件的 behaviors
  • Vant 样式覆盖

2. 实现步骤

详细步骤,可以参考小程序官方给出的文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1. 配置信息
  • 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

示例:

{"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "page/component/index","text": "组件"}, {"pagePath": "page/API/index","text": "接口"}]},"usingComponents": {}
}
2. 添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
3. 编写 tabBar 代码

app.jsonindex.json中引入组件,详细介绍见快速上手。

"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

 tabbar标签栏的基本用法

index.wxml 

<van-tabbar active="{{ active }}" bind:change="onChange"><van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

index.json

{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"}
}

 index.js

// custom-tab-bar/index.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {active: 0,},/*** 组件的方法列表*/methods: {onChange(event) {// event.detail 的值为当前选中项的索引this.setData({ active: event.detail });},}
})

自定义图片

index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange"><van-tabbar-item info="3"><imageslot="icon"src="/images/tabs/home.png"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="/images/tabs/home-active.png"mode="aspectFit"style="width: 30px; height: 18px;"/>首页</van-tabbar-item><van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

 app.json

{"pages": ["pages/home/home","pages/message/message","pages/contact/contact"],"preloadRule": {"pages/contact/contact":{"packages": ["p1"],"network": "all"}},"subPackages": [ {"root":"pgA","name":"p1","pages":["pages/cat/cat","pages/dog/dog"]},{"root":"pgB","name":"p2","pages":["pages/apple/apple","pages/banana/banana"],"independent": true}],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#13A7A0","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"tabBar": {"custom":true,"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/tabs/message.png","selectedIconPath": "/images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png"}]},"sitemapLocation": "sitemap.json","usingComponents": {"van-button": "@vant/weapp/button/index","my-number":"./components/numbers/numbers"}  
}

 

自定义图标--循环渲染tabBar的Item项

index.wxml

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{active}}" bind:change="onChange" active-color="#13A7A0"><van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}"><image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" /><image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />{{item.text}}</van-tabbar-item>
</van-tabbar>

① 能够知道如何安装和配置 vant-weapp 组件库

⚫ 参考 Vant 的官方文档

② 能够知道如何使用 MobX 实现全局数据共享

⚫ 安装包、创建 Store、参考官方文档进行使用

③ 能够知道如何对小程序的 API 进行 Promise 化

⚫ 安装包、在 app.js 中进行配置

④ 能够知道如何实现自定义 tabBar 的效果

⚫ Vant 组件库 + 自定义组件 + 全局数据共享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

采用Java语言开发的(云HIS医院系统源码+1+N模式,支撑运营,管理,决策多位一体)

采用Java语言开发的&#xff08;云HIS医院系统源码1N模式&#xff0c;支撑运营&#xff0c;管理&#xff0c;决策多位一体&#xff09; 是不是网页形式【B/S架构]才是云计算服务? 这是典型的误区! 只要符合上述描述的互联网服务都是云计算服务&#xff0c;并没有规定是网页…

东软联合福建省大数据集团打造“数据要素×医疗健康”服务新模式

5月23日&#xff0c;东软集团与福建省大数据集团有限公司在福州签订战略合作协议。 据「TMT星球」了解&#xff0c;双方将在健康医疗数据要素价值领域展开合作&#xff0c;通过大数据服务&#xff0c;赋能商业保险公司的产品设计和保险两核&#xff0c;打造“数据要素医疗健康…

安卓分身大师4.6.0解锁会员安卓14可用机型伪装双开多开

需登录解锁会员功能&#xff0c;除了加速进入不能&#xff0c; 其他主要功能都是可以使用&#xff0c;由于验证较多一些功能需要特定操作使用&#xff0c;进行伪装时请不要直接伪装&#xff0c;先生成成功后再进行自定义伪装&#xff01;链接&#xff1a;https://pan.baidu.com…

机器人非线性控制方法——线性化与解耦

机器人非线性控制方法是针对具有非线性特性的机器人系统所设计的一系列控制策略。其中&#xff0c;精确线性化控制和反演控制是两种重要的方法。 1. 非线性反馈控制 该控制律采用非线性反馈控制的方法&#xff0c;将控制输入 u 分解为两个部分&#xff1a; α(x): 这是一个与…

设计模式--观察者模式

观察者模式是一种行为设计模式&#xff0c;它定义了对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;它的所有依赖者都会自动收到通知并更新。这种模式在许多应用场景中非常有用&#xff0c;例如在实现事件驱动编程、消息队列、发布-订阅模型以…

vue 引入 emoji 表情包

vue 引入 emoji 表情包 一、安装二、组件内使用 一、安装 npm install --save emoji-mart-vue二、组件内使用 import { Picker } from "emoji-mart-vue"; //引入组件<picker :include"[people,Smileys]" :showSearch"false" :showPreview&q…

秒杀系统如何设计?【面试准备】

秒杀系统如何设计&#xff1f;【面试准备】 前言版权推荐秒杀系统如何设计&#xff1f;库存如何扣减的设计支付-延时队列最后 前言 2023-9-1 16:23:31 公开发布于 2024-5-22 00:09:02 以下内容源自《【面试准备】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话…

找钢集团亮相沙特利雅得建筑行业供应链展会

5月20日-21日&#xff0c;找钢产业互联集团&#xff08;以下简称&#xff1a;找钢集团&#xff09;亮相沙特利雅得建筑行业供应链展会。本次展会由沙特阿拉伯国家住房公司&#xff08;NHC&#xff09;主办&#xff0c;中信建设协办&#xff0c;涵盖住房新科技、绿色环保等多个主…

六零导航页 file.php 任意文件上传漏洞复现(CVE-2024-34982)

0x01 产品简介 LyLme Spage(六零导航页)是中国六零(LyLme)开源的一个导航页面。致力于简洁高效无广告的上网导航和搜索入口,支持后台添加链接、自定义搜索引擎,沉淀最具价值链接,全站无商业推广,简约而不简单。 0x02 漏洞概述 六零导航页 file.php接口处任意文件上传…

使用API有效率地管理Dynadot域名,进行域名邮箱的默认邮件转发设置

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

头歌OpenGauss数据库-I.复杂查询第5关:至少学了某位学生(Oliver)所学的全部课程的学生

本关任务&#xff1a;根据提供的表和数据&#xff0c;查询至少学了Oliver同学所学的全部课程的其他同学的信息&#xff08;学号s_id&#xff0c;姓名s_name&#xff09;。 student表数据&#xff1a; s_ids_names_sex01Mia女02Riley男03Aria女04Lucas女05Oliver男06Caden男07Li…

DFS:解决二叉树问题

文章目录 了解DFS1.计算布尔二叉树的值思路代码展示 2.求根节点到叶节点数字之和思路代码展示 3.二叉树剪枝思路代码展示 4.验证二叉搜索树思路分析代码展示 5.二叉搜索树中第k小元素思路&#xff1a;代码展示 6.二叉树的所有路径思路分析代码展示 总结 了解DFS 所谓DFS就是就…

OceanBase V4.2 特性解析:MySQL兼容之rename column 语法支持

1. 背景描述 MySQL 自8.0版本起&#xff0c;已支持rename column语法&#xff0c;这一语法允许用户在不更改列定义的情况下&#xff0c;为列重新命名。下面为使用rename column语法的一个具体示例&#xff1a; alter table t1 rename column col_a to col_b; 在OceanBase过去…

如何秒杀Promise面试题

如何秒杀Promise面试题 如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌&#xff0c;先问候他爹妈一套问候语&#xff01; 然后切记不要(ps:这是病句别在意!&#x1f923;) 自己想 找他要纸和笔 首先关于promise的面试题无非就是 promise 的状态和宏队列、…

git pull 出错 fatal: bad object refs/remotes/origin/xxxxx

使用git pull时出现以下问题 fatal: bad object refs/remotes/origin/xxxxx error: https://github.com/xxxxxx.git did not send all necessary objects解决办法 删除项目目录 .git\refs\remotes\origin 下面的所有文件 在 git pull 参考链接 How to handle git gc fatal: b…

5.23.9 TransUNet:Transformers 为医学图像分割提供强大的编码器

TransUNet&#xff0c;它兼具 Transformers 和 U-Net 的优点&#xff0c;作为医学图像分割的强大替代方案。一方面&#xff0c;Transformer 对来自卷积神经网络 (CNN) 特征图的标记化图像块进行编码&#xff0c;作为用于提取全局上下文的输入序列。另一方面&#xff0c;解码器对…

css去除复选框默认样式

HTML: <input type"checkbox" id"myCheckbox" class"custom-checkbox" /> <label for"myCheckbox" class"checkbox-label">自定义复选框</label> CSS: /* 隐藏默认复选框 */.custom-checkbox { -webk…

Go知识点复习

Go知识点复习 1.关于包的使用和GOPATH的配置 src:用于以代码包的形式组织并保存Go源码文件, 需要手动创建pkg目录&#xff1a;用于存放经由go install命令构建安装后的代码包&#xff08;包含Go库源码文件&#xff09;的“.a”归档文件bin目录&#xff1a;与pkg目录类似&…

C++学习-hello word

#include "iostream" #预处理指令 using namespace std; #预处理指令 int main() #程序执行从这里开始 {cout << "Hello, World!" << endl; #逻辑代码&#xff08;具体的功能代码&#xff09;return 0; …

国家开放大学,javaScript程序设计-形考任务-实训五:设计登录和注册页|实训六:设计简单的购物车

实训五&#xff1a;设计登录和注册页 1. 题目 设计登录和注册页。 2. 目的 &#xff08;1&#xff09;掌握表单域的引用方法。 &#xff08;2&#xff09;掌握常用控件的基本方法。 &#xff08;3&#xff09;掌握事件的处理方法。 &#xff08;4&#xff09;理解Cookie…