一.WXML模板语法

1.1 数据绑定

  • 绑定内容

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

image-20220726151344137

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

image-20220726151429602

  • 绑定属性

    image-20220726151726606

    直接写上插值语法，没有：

    image-20220726151817181

  • 三元运算

    生成一个十以内的随机数

    image-20220726152359497

    image-20220726152502470

  • 算数运算

    image-20220726152749621

    image-20220726152826545

1.2 事件绑定

小程序常用事件

image-20220726152926481

小程序事件对象常用属性

image-20220726153105676

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

image-20220726153423316

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

image-20220726154317917

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

image-20220726154404000

1.2.1 修改data数据

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

image-20220726155712093

image-20220726155737324

image-20220726155834800

1.2.2 事件传参

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

image-20220726160437812

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

image-20220726160643889

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

image-20220726160809017

1.2.3 bindinput语法格式

首先组件绑定事件

image-20220726161735967

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

image-20220726161824979

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

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

image-20220726162337059

image-20220726162428494

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

image-20220726162521305

image-20220726162618654

1.3 条件渲染

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

image-20220726162823644

image-20220726163857496

image-20220726163904333

1.3.1 block标签

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

1.3.2 hidden

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

image-20220726164739659

hidden和wxif区别：hidden就是v-show（display：block/none）,wxif就是直接将元素干掉了

1.4 列表渲染

wx：for

image-20220726181325431

image-20220726181417376

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

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

image-20220726184852329

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

image-20220726190106246

二.WXSS模板样式

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

2.1 rpx

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

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

单位换算

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

image-20220726192105249

2.2 样式导入

image-20220726192220310

2.3 全局样式/局部

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

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

注意：

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

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

三.全局配置

app.json就是全局配置文件

首先默认有这些设置项

image-20220726193146963

而我们小程序组成部分是

image-20220726193203278

3.1 window

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

image-20220726193328344

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

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

3.1.1 tabBar

image-20220726195056004

最少两个最多五个

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

tabBar六个组成部分：

image-20220726195254676

tabBar节点配置项：

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

image-20220726195344526

image-20220726195355043

注意

  • list为必填项

    image-20220726195537319

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

    image-20220726195612184

    image-20220726195913006

    image-20220726195928435

四.页面配置

每个页面自己的json文件

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

页面配置常用属性：

image-20220726200629786

五.网络数据请求

注意：

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

image-20220726200854914

5.1 配置request合法域名

image-20220726201023553

5.2 发起get请求

wx.request()

image-20220726201329924

post同理，并且参数也是data

5.3 页面刚加载时请求数据

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

image-20220726202337892

5.4 注意

跳过request合法校验：

image-20220726202517646

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

关于跨域和ajax：

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

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

六.本地生活案例

image-20220726202851104

注意：

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

image-20220726204446860

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/heymar/p/16546568.html

标签： WindowsPhone WindowsMobile 小程序开发
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！