首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

微信小程序复习巩固 —— (wxml,wxss、js、wx:if、wx:for)

,这次把微信小程序基础重新捡起来,毕竟从去年暑假学完小程序到现在过去了挺长时间,这次基础语法迅速过一遍,就开始做项目了,冲冲冲 一、学习记录 view 标签 和 text 标签 插值表达式使用,js...后端数据传值问题 wx:if 基本使用 wx:for 循环遍历显示数据 小案例,九九乘法表 二、案例整理 2.1 view 标签和 text 标签简单实用 直接在 wxml 文件中编写 code wxml...wx:if 条件渲染 (类比 vue 中 v-if v-show) 单度标签判断 wxml {{info}}view> <view wx:else...使用 block 标签,一次性可以绑定多个标签 xxxxview> xxxxview> block> 2.4 wx:for 循环迭代 单个标签循环 wxml 我们通过...--pages/index/index.wxml--> 小程序基础学习(一)2020年2月17日21:13:51 微信小程序基础学习

91720

【小程序】WXML 模板

目录 WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 区别 WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 区别 JS 逻辑交互 1....小程序中 .js 文件 2. 小程序中 .js 文件分类 WXML 模板 1....什么是 WXML WXML(WeiXin Markup Language)是小程序框架设计一套标签语言,用来构建小程序页面的 结构,其作用类似于网页开发中 HTML。 2....小程序中 .js 文件 一个项目仅仅提供界面展示是不够,在小程序中,我们通过 .js 文件来处理用户操作。例如: 响应用户点击、获取用户位置等等。 2....小程序中 .js 文件分类 小程序中 JS 文件分为三大类,分别是: app.js 是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序 页面的 .js 文件 是页面的入口文件,通过调用

1.2K30

小程序 | 8-wxml

介绍 wxml相关语法内容。...wxml 基本格式: 类似 html 代码:比如,可以写成单标签也可以写成双标签 必须有严格闭合:没有闭合会导致编译报错 大小写敏感:class 和 Class 是不同属性 1. {{}}- Mustache..."clicked":""}}'>点击上面的按钮改变这个文本颜色 mustache.js // pages/mustache/mustache.js Page({ data: {...模板 10.4.1 模板基本使用 wxml 提供模板(template),可以在模板中定义代码片段,在不同地方调用。(这是 wxml 代码复用一种机制)。...使用 name 属性作为模板名字,然后在 节点中定义代码片段。 模板中包裹内容在被使用前,是不会进行任何渲染。 定义并使用模板(示例是在 wxml 中定义并使用): <!

68620

WXML 标签语言【小程序专题6】

上一节home.wxml文件,只写了最简单一行hello world。实际开发中,不会这样写,而是要加上各种标签,以便后面添加样式和效果。 小程序 WXML 语言提供各种页面标签。...下面,对home.wxml改造一下,加上两个最常用标签。 hello world 上面的代码用到了两个标签:和。...标签表示一个区块,用于跟其他区块分隔,类似 HTML 语言标签。表示一段行内文本,类似于 HTML 语言标签,多个标签之间不会产生分行。...注意,每个标签都是成对使用,需要有闭合标记,即标签名前加斜杠表示闭合,比如闭合标记是。如果缺少闭合标记,小程序编译时会报错。...由于我们还没有为页面添加任何样式,所以页面的渲染效果跟上一节是一样。后面添加样式时,大家就可以看到标签巨大作用。

56120

微信小程序:WXML模板语法

数据绑定 数据绑定基本原则: 在data中定义数据 在WXML中使用数据 在data中定义页面的数据 在页面对应.js文件中,把数据定义到data对象中即可: Page({ data: {...点击内部按钮时,点击事件以冒泡方式向外扩撒,也会触发外层viewtap事件处理函数。...此时,对于外层view来说: e.target指向是触发事件源头组件,因此,e.target是内部按钮组件 e.currentTarget指向是当前正在触发事件哪个组件,因此,e.currentTarget...通过bindtap,可以为组件绑定tap触摸事件,语法格式如下: 按钮 在页面的.js文件中定义对应事件处理函数...js文件中定义事件处理函数: inputHandler(e){ //e.detail.value是变化过后,文本框最新值 console.log(e.detail.value);

1.9K60

探索:怎样将单个vue文件转换为小程序所需四个文件(wxml, wxss, json, js)

抽象语法树 可以看到我们js代码已经被转换成一个json对象,这个json对象描述了这段代码。 我们可以通过拿到这个json对象去进行树形遍历,从而把这一段js代码进行加工成一段我们想要代码。...比如可以把它转换成一段ES5代码。 这里就不描述具体步骤了,在后面的将script -> js中有具体描述。 这是js部分。...script -> js文件 babel 在进行这个步骤之前,先得讲一个很重要工具,就是Babel 在将vue中script部分转换成小程序需要js文件过程中,最重要就是Babel。.../dist/res-js.js', result.code.trim()); 下面是在parseImportVisitor中拦截ImportSpecifier,ImportDefaultSpecifier...转换后小程序代码 template -> wxml文件 将 template 代码转换为 AST树 接下来是 将 template 部分 转换为 wxml 文件。

4.6K30

微信小程序WXML页面常用语法(讲解+示例)

(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计一套标签语言,结合基础组件、事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可以理解为我们传统页面中...再大白话一点:你所看到小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(主要) + WXSS (美化) 实现 这一篇,我们主要涉及到WXML 中例如数据绑定、或者运算等等...,能很快进行数据绑定操作 有一个前提条件,我们先模拟一些数据,我们只需要在页面的 js 文件中 data对象中定义小程序初始化数据,例如下面代码,我们随便拿一些常见数据类型来模拟一下 Page...标签组件中进行数据绑定其实是非常简单,微信小程序中通过 {{}} 来解析刚才在 JS 中模拟变量 要注意:直接通过 {{}} 解析变量都是 页面 js 文件中 Page --> data 下...这块理解没什么难点,无非就是关于逻辑几种判断,看一个例子就清楚了 说明:isLogin 是在 js 中模拟一个数据,分别赋予 true false 或者其他 例如 null,会根据逻辑值显示不同内容

3K10

微信小程序分包反编译教程

# 获取小程序包 1.使用自己手机上微信打开"EMS中国邮政速递物流"小程序,可以添加到"我小程序" 2.打开模拟器微信并登录 3.在模拟器微信下拉小程序最近使用历史中打开"EMS中国邮政速递物流...",如果历史记录中没有就在我小程序中找一找 4.打开小程序等待加载之后就可以去找源码包了 5.打开RE文件管理器,进入到以下路径查找源码包(可以根据下载时间区分出你想要源码包) /data/data...Split app-service.js and make up configs & wxss & wxml & wxs... deal config ok deal js ok deal wxss.js...# 逆向教程小程序 为小程序逆向而生小程序 ?...# 参考资料 以中银E路通小程序为例10分钟带你学会微信小程序反编译 反编译微信小程序错误解决 可跨平台微信小程序反编译客户端 10分钟带你反编译网易严选电商微信小程序

3.6K10

小程序 | 11-组件化

创建自定义组件 自定义组件由 json、wxml、wxss、js 四个文件组成,我们通常是在根目录下创建一个文件夹——components,在该文件夹中存放我们自定义公共组件。...自定义组件步骤: 现在 json 文件中进行自定义组件声明——"component": true, 在 wxml 中编写自定义组件模板内容 在 wxss 中编写自定义组件样式 在 js 文件中定义数据和组件内部相关逻辑...在使用方 json 文件中引用自定义组件——"引用自定义组件时标签名":"自定义组件绝对路径或相对路径" 在使用方 wxml 文件中,通过上一步定义标签名引用自定义组件。..."> about.js // pages/about/about.js Page({ handleItemClick(event){ // 获取组件事件中暴露出来数据...--components/my-select/my-select.wxml--> 组件内计数 {{count}} my-select.js // components/my-select

2.4K20
领券