小程序基础 （二）

小程序开发框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。

小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

WXML 语法参数 (参考官网)

  • WXML 语法参数链接

1. 数据绑定

  • 双括号
  • 和vue、react的对比
    • 运算
    • 三元
    • 方法调用 (不行)
  • 属性可以使用{{}}

2. 条件渲染

  • wx:if
  • wx:if 和 wx:elif wx:else
  • block
  • wx:if 和 hidden

####3. 列表渲染

  • wx:for 遍历简单类型数组
  • wx:for 遍历对象数组
  • 起别名 wx:for-item=‘it’ wx:for-index=‘i’
  • wx:key

​

WXS 语法参考 (参考官网)

  • .wxs 文件
  • wxs标
   第一种方式 : 单独创建一个.wxs文件1. 创建common.wxs文件2. 创建一个方法  function my_slice(str) { return str.slice(0,1)}3. module.exports.my_slice=my_slice4. 引入 <wxs src='./common.wxs' module='tool'>5. 使用 : <view>{{ tool.my_slice(str) }}</view>第二种方式 : 在 wxml内 使用 wxs 标签处理1. 创建一个 wxs 标签 <wxs></wxs>2. 创建方法 function my_case(str) {  return str.toUpperCase()  }3. 导出  module.exports.my_case = my_case4. 使用模块接收 <wxs module='tool1'></wxs>5. 使用  tool1.my_case(str)

事件绑定

1. bindTap

  • 绑定事件
<button bindtap="click1">按钮1</button>
  • 事件处理函数
Page({click1() {console.log(111)}
})
  • 传参
// 传递
<button bindtap="click2" data-msg="abc" data-index="123">按钮2</button>// 接收
click2(e){ e.currentTarget.dataset
},

2. catchTap 阻止冒泡

<view  bindtap='click0'><button bindtap='click1'>按钮1</button> <button catchtap='click2'>按钮2</button>
</view>

3. bindinput

  • 绑定事件
<input bindinput="handleInput" />
  • 事件处理函数
Page({// 绑定的事件handleInput: function(e) {e.detail.value}
})

数据操作

  • setData1

  • [setData2](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object data, Function callback))

  • 获取数据 : this.data.name

  • 修改数据 :

    • 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
    • setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
console.log(this.data.name)  // zs
this.setData({name :'ls'
})
console.log(this.data.name)  // ls

WXSS

  • WXSS链接

  • WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

  • 与 CSS 相比，WXSS 扩展的特性有：

    • 响应式长度单位 rpx
    • 样式导入

1. 尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

  • 官网建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

  • 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

2. 样式导入

  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
/*  app.wxss  */
@import 'common.wxss';.middle {color : 'red'
}

3. 行内样式

<view style="color : red;">啊哈</view>

4. 选择器

目前支持的选择器有：

选择器样例样例描述
.class.intro选择所有拥有 class=“intro” 的组件
#id#firstname选择拥有 id=“firstname” 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
nth-child(n)view:nth-child(n)选择某个索引的标签
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容
  • 注意 :
    • 小程序 不支持通配符 *
  • 样式初始化配置
page,view,input,text {margin: 0;padding: 0;box-sizing: border-box;
}

5. 小程序使用less

原生小程序不支持less，我们可以借助 vscode 使用 less

  1. 编辑器是vscode

  2. 安装 VSCode插件 : easy less

  3. 在vs code的设置中加入如下，配置

    "less.compile": {"outExt":       ".wxss"
}

  4. 新建 less文件，如 index.less, 保存即可, 自动机会编程出样式到对应的index.wxss 里面

要么只用less ,要么只用 wxss 不要混着用,后果很严重, 因为 wxss的东西被会覆盖掉

less => wxss + wxml

自定义组件

类似 vue 和 react 中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

1. 创建自定义组件

  • 创建文件夹 components/
  • 创建 组件 文件夹 Test/
  • 右键 新建 Component

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FL1bY39c-1595140559959)(D:\黑马课程\备课\05-小程序\整理最新笔记+代码★\md-imgs\组件1.png)]

  • 注意声明组件 (一般情况下是声明过了)
    • 在组件的 json 文件中进行自定义组件声明
// Test.json
{"component": true // 声明组件
}
  • 注意注册组件 (一般情况下 也已经注册过了)
Component({/*** 1. 组件的属性列表 - 外界传进来的数据*/properties: {name : {type : String,value :'初始值'}},/*** 2. 组件的初始数据 - 组件自己的私有数据*/data: {},/*** 3. 组件的方法列表*/methods: {}
})

3. 引入组件

  • 首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径
// index.wxml 想使用组件的话, 就要在 index.json 里 先引入
{"usingComponents": {// 要使用的组件的名称     // 组件的路径"Test":"/components/Test/Test"}
}

####4. 使用组件

<Test></Test>

法列表
*/
methods: {
}
})

#### 3. 引入组件- 首先要在页面的 `json` 文件中进行引用声明。还要提供对应的组件名和组件路径```js
// index.wxml 想使用组件的话, 就要在 index.json 里 先引入
{"usingComponents": {// 要使用的组件的名称     // 组件的路径"Test":"/components/Test/Test"}
}

####4. 使用组件

<Test></Test>

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

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

相关文章

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章&#xff1a;[传送门] 项目需求&#xff1a; 二维码推送到一体机上&#xff0c;给学生签到扫…
阅读更多...
喜欢用Block的值得注意-Block的Retain Cycle的解决方法

喜欢用Block的值得注意-Block的Retain Cycle的解决方法

本文不讲block如何声明及使用&#xff0c;只讲block在使用过程中暂时遇到及带来的隐性危险。 主要基于两点进行演示&#xff1a; 1.block 的循环引用(retain cycle) 2.去除block产生的告警时&#xff0c;需注意问题。 有一次&#xff0c;朋友问我当一个对象中的block块中的访问…
阅读更多...
小程序基础 （三）

小程序基础 （三）

5. 使用 slot 使用单个slot // 页面 <Test><view>自定义内容</view> </Test>// 组件 <view><view>前面的内容</view><slot></slot><view>后面的内容</view> </view>使用多个slot - 具名 // 页面 &…
阅读更多...
【PyQt5】QT designer + eclipse 集成开发

【PyQt5】QT designer + eclipse 集成开发

【写在前面的话】 考虑将pyqt5的界面开发qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行进行转换。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步骤】 1、首先配置Qt designer。 菜单 run-->external Tools-->External tools confi…
阅读更多...
iOS UIlabel文字排版（改变字间距行间距）分类

iOS UIlabel文字排版（改变字间距行间距）分类

在iOS开发中经常会用到UIlabel来展示一些文字性的内容&#xff0c;但是默认的文字排版会觉得有些挤&#xff0c;为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。 比如一个Label的默认间距效果是这样&#xff1a; 然后用一个封装起来的Cat…
阅读更多...
MySQL查询之聚合查询

MySQL查询之聚合查询

为了快速得到统计数据&#xff0c;提供了5个聚合函数&#xff1a; count(*)表示计算总行数&#xff0c;括号中写星与列名&#xff0c;结果是相同的 查询学生总数 select count(*) from students; max(列)表示求此列的最大值 查询女生的编号最大值 select max(id) from students…
阅读更多...
React基础学习（第一天）

React基础学习（第一天）

React 概述 : React 是一个用于 构建用户界面 的 JavaScript 库因为框架是有一整套解决方案的&#xff0c;React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架&#xff0c;而React本身只是充当一个前端…
阅读更多...
iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
阅读更多...
day24 01 初识继承

day24 01 初识继承

day24 01 初识继承 面向对象的三大特性&#xff1a;继承&#xff0c;多态&#xff0c;封装 一、继承的概念 继承&#xff1a;是一种创建新类的方式&#xff0c;新建的类可以继承一个或者多个父类&#xff0c;父类又可称基类或超类&#xff0c;新建的类称为派生类或者子类 class…
阅读更多...
React基础学习（第二天）

React基础学习（第二天）

虚拟DOM JSX 涉及到 虚拟DOM ,简单聊一下 定时器渲染问题 // 方法 function render() {//2. 创建react对象let el (<div><h3>时间更新</h3><p>{ new Date().toLocaleTimeString()}</p></div>)//3. 渲染ReactDOM.render(el, document.g…
阅读更多...
iOS 去除字符串中的空格或多余空格（适合英文单词）

iOS 去除字符串中的空格或多余空格（适合英文单词）

NSString -stringByTrimmingCharactersInSet: 是个你需要牢牢记住的方法。它经常会传入 NSCharacterSet whitespaceCharacterSet 或 whitespaceAndNewlineCharacterSet 来删除输入字符串的头尾的空白符号。 需要重点注意的是&#xff0c;这个方法 仅仅 去除了 开头 和 结尾 的…
阅读更多...
华为交换机在Telnet登录下自动显示接口信息

华为交换机在Telnet登录下自动显示接口信息

因为用console连接交换机&#xff0c;默认是自动显示接口信息的&#xff0c;比如down掉一个接口后&#xff0c;会自动弹出接口被down掉的信息&#xff0c;但是在telnet连接下&#xff0c;默认是不显示这些信息的&#xff0c;需要开启后才可显示。 1、首先开启info-center(默认是…
阅读更多...
React基础学习（第三天）

React基础学习（第三天）

条件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加载中return <h1>Loading...</h1>}return <div>这就是我们想要的内容</div>} // 钩子函数 五秒钟之后 修改状态值componentDidMount () { setTimeout(() > {this.setState(…
阅读更多...
componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

将string字符串转换为array数组 NSArray *array [Str componentsSeparatedByString:","]; &#xff1d;&#xff1d;反向方法 将array数组转换为string字符串 NSString *tempString [mutableArray componentsJoinedByString:","];--,是分隔符 可不加分隔…
阅读更多...
java中的各种数据类型在内存中存储的方式

java中的各种数据类型在内存中存储的方式

转载别人的附上链接&#xff1a;https://blog.csdn.net/zj15527620802/article/details/80622314 1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题。&#xff08;其中包括两部分&#xff09; 分配&#xff1a;内存的分配是由程序完成的&#xff0c;程序员需要通…
阅读更多...
vscode的 jsonp 配置文件

vscode的 jsonp 配置文件

{ // 工具-字体大小 “editor.fontSize”: 15, // 工具-tab缩进 “editor.tabSize”: 2, // 工具-在视区宽度换行 “editor.wordWrap”: “on”, // 工具-缩放 “window.zoomLevel”: 1, // 工具-编写tab识别语言格式 “emmet.includeLanguages”: { “vue-html”: “html”, “…
阅读更多...
NSString拼接字符串和NSPredicate详解

NSString拼接字符串和NSPredicate详解

NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串&#xff0c;需要将string1和string2连接起来 03 04 //方法1. 05 string [[NSString alloc]initWithFormat:"%,%", string1, string2 ]; 06 07 //方法2. 08 string [string1 …
阅读更多...
线程模块

线程模块

信号量 from threading import Semaphore,Thread import timedef func(a,b):time.sleep(1)sem.acquire()print(ab)sem.release()sem Semaphore(4) for i in range(10):t Thread(targetfunc,args(i,i5))t.start() 信号量事件 # 事件被创建的时候&#xff0c;默认为False状态 #…
阅读更多...
React中级学习（第一天）

React中级学习（第一天）

Props深入 children 作用 : 获取组件标签的 子节点获取方式 : this.props.children <App>此处的内容&#xff0c;就是组件的 children&#xff0c;将来通过组件的 props.children 就可以获取到这些子节点了 </App>props 校验 作用&#xff1a;规定组件props的类…
阅读更多...
iOS 正则表达式判断纯数字以及匹配11位手机号码

iOS 正则表达式判断纯数字以及匹配11位手机号码

1用正则表达式 //是否是纯数字(BOOL)isNumText:(NSString *)str{NSString * regex "(/^[0-9]*$/)";NSPredicate * pred [NSPredicate predicateWithFormat:"SELF MATCHES %", regex];BOOL isMatch [pred evaluateWithObject:st…
阅读更多...
最新文章

Copyright @ 2022~2023