草庐IT

day02模板与配置

Heymar-10 2023-03-28 原文

一.WXML模板语法

1.1 数据绑定

  • 绑定内容

跟vue差不多,在页面的js文件定义到data里面

然后通过插值语法用在wxml中即可

  • 绑定属性

    直接写上插值语法,没有:

  • 三元运算

    生成一个十以内的随机数

  • 算数运算

1.2 事件绑定

小程序常用事件

小程序事件对象常用属性

target和currentTarget的区别,target是触发事件的源头组件,而currentTarget是当前触发这个事件的组件

要绑定一个事件只需要在组件上写上事件类型以及对应的回调函数

然后回调函数写在对应的js文件里面,没有什么包裹直接写在外层

1.2.1 修改data数据

这里修改data里面的数据,需要在函数里面来改,而且改的方式有点不同,利用了 this.setData这个方法,里面为一个对象可以对data里面的一些值做一些操作,听说这个方式是react

1.2.2 事件传参

注意小程序传参数,不能写在事件回调的括号里面,这样写只会被当做事件名

要传参的话,需要在这个组件里面来一个自定义属性,data-什么的形式,其中什么就是你的参数名,值为一个插值语法

然后要拿参数的话就通过 e.target.dataset.参数名获取

1.2.3 bindinput语法格式

首先组件绑定事件

然后注意这里收集值,不是通过e.target而是e.detail

1.2.4 文本框与data之间的数据同步

首先data定义数据,然后文本框绑定数据

然后就是修改值改到数据里面,通过bindinput事件来修改

1.3 条件渲染

通过wx:if来控制,当然也有对应的elif和else

1.3.1 block标签

类似于template可以包裹一组标签,让他们集体显示隐藏,而且最主要的他会不暂用空间布局

1.3.2 hidden

可以直接用hidden控制组件显示隐藏,注意为true是隐藏

hidden和wxif区别:hidden就是v-show(display:block/none),wxif就是直接将元素干掉了

1.4 列表渲染

wx:for

需要注意的是索引和值都通过里面的插值语法获得,这里就偏向于模板引擎多一点

当然我们也可以自定义索引的名字和变量名

wxfor也需要key,没有id也可以直接写index索引,注意key不用写插值语法

二.WXSS模板样式

wxss和css大部分相同,主要区别是 rpx单位和@import样式引入

2.1 rpx

小程序独有尺寸单位,类似于rem,可以适配任意端。

是将宽度分为750份,所以所有屏幕的宽度都是750rpx,只是某些手机1rpx大一点某些手机1rpx小一点

单位换算

推荐采用iPhone6作为设计尺寸来做,因为直接px乘以2就是rpx单位

2.2 样式导入

2.3 全局样式/局部

定义在app.wxss里面的即为全局样式

在单独文件里面wxss都是局部样式只对当前页面生效

注意

当两个样式冲突时,就近原则,局部会覆盖全局

当局部样式权重大于或等于全局时才会覆盖

三.全局配置

app.json就是全局配置文件

首先默认有这些设置项

而我们小程序组成部分是

3.1 window

首先window中比较常用的配置项

注意导航栏背景颜色只支持#开头的颜色

上拉触底距离就是当我们滑动页面下面会刷新数据出来比如电商网站一直滑下面,滚动条到一定距离就会刷新下面的数据,小程序默认为50

3.1.1 tabBar

最少两个最多五个

顶部tabBar不会显示icon只会显示文本

tabBar六个组成部分:

tabBar节点配置项:

直接添加在app.json里面即可

注意

  • list为必填项

    每一个tab又可以写这些配置

四.页面配置

每个页面自己的json文件

对当前页面的窗口外观等进行配置

页面配置常用属性:

五.网络数据请求

注意:

  • 只能请求https开头的接口
  • 必须将接口的域名添加到信任列表中

5.1 配置request合法域名

5.2 发起get请求

wx.request()

post同理,并且参数也是data

5.3 页面刚加载时请求数据

在js里面找到钩子onLoad在这类请求数据

5.4 注意

跳过request合法校验:

但是仅能在开发调试阶段使用,不允许上线使用!

关于跨域和ajax

由于跨域是因为浏览器的同源策略,而小程序宿主是微信,所以小程序不存在跨域问题

然后由于ajax是基于xhr这个浏览器的对象,小程序的宿主是微信,所以发起请求也不能叫做ajax请求叫做发起网络请求

六.本地生活案例

注意:

接口返回来的数据可以通过this.setData给到我们的data数据

有关day02模板与配置的更多相关文章

  1. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  2. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本,可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中?您能否举例说明如何做到这一点?提前谢谢你。 最佳答案 首先,您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后,在您的应用中阅读它:require"yaml"arg

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候,windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表,但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题),加之暑假之后对cmake实在是爱不释手,且这样配置确实十分简单(其实都不需要配置),故斗胆妄言vscode下配置CV之法。其实极为简单,图比较多所以很长。如果你看此文还配不好,你应该思考一下是不是自己的问题。闲话少说,直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么,我不说是谁。CMake是一个开源免费并且跨平台的构建工具,可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  5. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例,我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  6. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  7. 神州数码无线产品(AC+AP)配置 - 2

    注意:本文主要掌握DCN自研无线产品的基本配置方法和注意事项,能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为:adminAP默认IP地址为:192.168.1.10AP默认情况下DHCP开启AP静态地址配置:setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能:setmanagementdhcp-statusup/downAP设置默认网关:setstatic-ip-routegeteway192.168.10.254查看AP基本信息:getsystemgetmanagementgetmanaged-apgetrouteAP配

  8. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

  9. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中,下列关于数学运算结果正确的是:(B)a=10b=3print(a//b)print(a%b)print(a/b)A.3,3,3.3333...B.3,1,3.3333...C.3.3333...,3.3333...,3D.3.3333...,1,3.3333...解析:    在Python中,//表示地板除(向下取整),%表示取余,/表示除(Python2向下取整返回3)2.如下程序Python2会打印多少个数:(D)k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析:    按照题意每次循环K/2,直到K值小于等

  10. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

随机推荐