微信小程序配置视图层数据绑定相关示例

目录
  • 官方文档
  • 一、小程序结构目录
    • 1.1 小程序文件结构和传统web对比
    • 1.2 基本的项目目录
  • 二、配置介绍
    • 2.1 配置介绍
    • 2.2 全局配置app.json
    • 2.3 page.json
  • 三、视图层
    • 3.1 数据绑定
      • 3.1.1 普通写法
      • 3.1.2 组件属性
      • 3.1.3 bool类型
    • 3.2 运算
      • 3.2.1 三元运算
      • 3.2.2 算数运算
      • 3.2.3 逻辑判断
      • 3.2.4 字符串运算
      • 3.2.5 注意
    • 3.3 列表渲染
      • 3.3.1 wx:for
      • 3.3.2 wx:for
      • 3.3.3 wx:key
    • 3.4 条件渲染
      • 3.4.1 wx:if
      • 3.4.2 hidden

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

一、小程序结构目录

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

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

官网

1.1 小程序文件结构和传统web对比

结构 传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置 JSON

通过以上对比得出,传统web是三层结构。而微信小程序 是四层结构,多了一层配置.json

1.2 基本的项目目录

二、配置介绍

2.1 配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和 页面自己的page.json

注意:配置文件中不能出现注释

2.2 全局配置app.json

app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的app.json配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含义

pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

完整的配置信息请参考app.json配置

2.3 page.json

这里的page.json其实用来表示页面目录下的page.json这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置app.json中部分window配置项的内容,页面中配置项会覆盖app.json的window中相同的配置项。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如#000000
navigationBarTextStyle String white 导航栏标题颜色,仅支持black/white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持dark/light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新。 详见Page.onPullDownRefresh
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px。 详见Page.onReachBottom
disableScroll Boolean false 设置为true则页面整体不能上下滚动;只在页面配置中有效,无法在app.json中设置该项

三、视图层

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

3.1 数据绑定

3.1.1 普通写法

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

3.1.2 组件属性

简直和上面没区别啊

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

3.1.3 bool类型

不要直接写 checked="false",其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

3.2 运算

3.2.1 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

3.2.2 算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

3.2.3 逻辑判断

<view wx:if="{{length > 5}}"> </view>

3.2.4 字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

3.2.5 注意

花括号和引号之间如果有空格,将最终被解析成为字符串

3.3 列表渲染

3.3.1 wx:for

项的变量名默认为itemwx:for-item可以指定数组当前元素的变量名

下标变量名默认为indexwx:for-index可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.name}}:{{item.age}}
</view>
Page({
  data: {
    array: [{
      name: 'foo',
      age: 18,
    }, {
      name: 'bar'
      'age': 20,
    }]
  }
})

3.3.2 wx:for

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3.3.3 wx:key

提高效率使用的

3.4 条件渲染

3.4.1 wx:if

在框架中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

3.4.2 hidden

<view hidden="{{condition}}"> True </view>

类似wx:if

频繁切换 用hidden

不常使用 用wx:if

以上就是微信小程序配置视图层数据绑定相关示例的详细内容,更多关于微信小程序配置视图层数据绑定的资料请关注我们其它相关文章!

(0)

相关推荐

  • 微信小程序 (七)数据绑定详细介绍

    数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里先记录下 data.wxml <!--数据绑定使用对象---内容--> <view>{{message}}</view> <!--数据绑定使用对象---组件属性---需要在双引号之内--> <view id="item-{{id}}">组件属性</view&g

  • 微信小程序 教程之数据绑定

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML 数据绑定 WXML中的动态数据均来自对应Page的data. 简单绑定 数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于: 内容 <view> {{ message }} </view> Page({ data: {

  • 微信小程序之前台循环数据绑定

    微信小程序之前台循环数据绑定 微信小程序的循环数据绑定到wxml例: wxml里: <view wx:for="{{array}}"> {{item.message}} </view> 通过上面的wx.for可以绑定一个数组,数组是json类型的:默认的索引序号是item,所以用{{item.message}} 显示数据js里: data: { array: [ { "message": "foot", "txt

  • 微信小程序之数据绑定原理解析

    最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序.于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大. 通过最近看资料和别人的视频,总结一下: 1.页面布局,先画好.都是盒子,需要几个盒子,你就先画几个盒子.比如下面这个页面: 红色盒子 浅蓝盒子 绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较小一个盒子) 蓝色盒子 2.数据先静态,后动态 简单的说就是刚开始,你可以直接先往页面里塞

  • 微信小程序 数据绑定详解及实例

    微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定. >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用

  • 微信小程序 数据绑定及运算的简单实例

    微信小程序 数据绑定的简单实例 简单用法: Page({ data: { message: '张三' } }) /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var content1={ date: "2020年 10月 8日 ", title:"时间群" , nameData:{ name1:"张三李四", name2:"人五人六", }, fade:true/fa

  • 微信小程序配置视图层数据绑定相关示例

    目录 官方文档 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3.1 数据绑定 3.1.1 普通写法 3.1.2 组件属性 3.1.3 bool类型 3.2 运算 3.2.1 三元运算 3.2.2 算数运算 3.2.3 逻辑判断 3.2.4 字符串运算 3.2.5 注意 3.3 列表渲染 3.3.1 wx:for 3.3.2 wx:for 3.3.3 w

  • 微信小程序常用视图容器组件使用详解

    目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述 组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称 属性="值">内容<

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

  • 详解微信小程序「渲染层网络层错误」的解决方法

    问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中

  • 微信小程序 wxapp视图容器 view详解

    微信小程序 view 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green

  • 微信小程序缓存过期时间的相关设置

    目录 微信小程序缓存机制介绍 哪些是一定需要过期的缓存 写法 微信小程序缓存机制介绍 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理. 但是微信默认设置了缓存是无限长的过期时限,这对于我们的小程序开发,是非常不好的. 哪些是一定需要过期的缓存 我正在开发的项目

  • 微信小程序拖拽排序列表的示例代码

    拖拽排序列表 思路 界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件 主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发 判断是否需要滑动页面,因为 movable-area组件 滑动事件被catch掉,无法滑动: 记录滑动经过的项

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • 微信小程序实现搜索关键词高亮的示例代码

    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下 list:[ '武汉大学', '华中科技

随机推荐