前端wxml取后台js变量值_微信小程序WXML页面常用语法（讲解+示例）

停更了有一段时间了，首先得和大家说一声抱歉，前段时间家里的事情有一点多，常出门帮家里做点事情，有一些空闲的时间，也在写代码，人也不能总处于一直学习新事物的路上，每收获一些内容，停下来巩固巩固，实际操练一下在我看来还是非常重要的，如何平衡 学习+输入文章 以及 写一些小 Demo以及项目确实是一个难点，写一篇文章，比我写代码要费事多了，首先得让别人能看懂，有时候就需要大量的文字或者配图、代码来配合演示，包括后期的上传发，针对不同社区图片地址、文章格式的处理，我认为都是很繁琐的工作，在写代码的日子中，这些琐碎的工作会打断我的思路，所以这次搁了有一段时间了。

其实关于小程序最基本的一些文章，早就写好了，但是看来看去，总感觉差强人意，只能后面一边修改，一遍考虑再发出来，其实很多内容爬着官方的文档，都是可以找到答案的，只不过可能会比较隐蔽、晦涩。虽然，现在写的一些东西，已经能配合自己写的后台实现我的一些需求了， 但是毕竟我只是一个后端狗，前台也只是用一些原生的代码写的，优化等也都不是很专业，总感觉写的没什么底气。

没更新的日子，还是看到有很多小伙伴在后台私聊，或者每天有一些小小的关注，还是非常高兴，我还是尽可能给大家更新一些文章，和大家分享一些我对小程序也好，Java 系列相关的或者别的技术的一些学习记录，以及我的理解和思路，和大家一起交流~

9月份我的时间就相对稳定了，如果最近更新有所延迟，希望大家见谅，最后仍然非常感谢大家的支持！！！

(一) WXML 是什么

官方说明：WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

在前面我们就已经提过，WXML，就可以理解为我们传统页面中的HTML，它是微信为我们提供的一套标签语言，可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽)，开发中 WXML 页面就作为我们一些逻辑行为的入口，以及效果展示的承载者。

再大白话一点：你所看到的小程序页面长什么样(不涉及背后做了什么行为，只说表面)，就是 WXML(主要) + WXSS (美化) 实现的

这一篇，我们主要涉及到的是 WXML 中例如数据绑定、或者运算等等，但是学习之前，很显然，我们需要认识几个常见的标签，后面我们会总结一些常用的标签，下面会用到的有：

、 > 还有一些标签，大家去看官网文档就可以了，写的非常清楚，我们这里重点还是说一下关于其中的一些标签语法问题

官网——WXML语法文档

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

官网——组件文档

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

<text>这是text标签1text>
<text>这是text标签2text>


<view>这是div标签1view>
<view>这是div标签2view>

<view>
  
  <image  mode='widthFix' style='width:60%' src='https://www.ideal-20.cn/medias/avatar.jpg'>image>
view>

看一下效果

(二) 数据绑定

虽然还不涉及到什么页面的美化，以及复杂的标签，不过一个极为简单的静态页面现在已经可以构造出来了，归根结底，我们最后都是要进行前后台数据的交互的，而微信小程序就为我们提供了很多很好用的用法，能很快的进行数据的绑定操作

有一个前提条件，我们先模拟一些数据，我们只需要在页面的 js 文件中的 data对象中定义小程序初始化的数据，例如下面代码，我们随便拿一些常见的数据类型来模拟一下

Page({
    
  /**
   * 页面的初始数据
   */
  data: {
    
    msg: "你好，微信小程序",
    status: 100,