2021-04-07

2021-04-07 22:01:16 阅读：160 来源： 互联网

标签：function 07 04 WXML JS zwz 2021 WXSS 页面

第一块：JSON
上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。

比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "标题zwz",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

第二块：WXML

WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

比如最常用的双向数据绑定：

index.wxml

<view class="container">
  {{msg}}
</view>
index.js

Page({
  data: {
    msg:'hello zwz',
  },
  onl oad: function () {
   
  }
})

这样，我们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。

这时，我们按下CTRL + S（保存，重新编译），我们会发现前台会渲染出 hello zwz。

这就是传说中的双向数据绑定，你把JS后台的 hello zwz 改成 hi zwz，那么前台也会显示 hi zwz，以此类推。

同理，如果是数组：

在JS页面的Page的data下，加上array变量，作为普通数组

array:[1,2,3,4,5,6,7,8,9],
接着将WXML界面的msg替换成array，界面则会显示如下：

本文原创首发CSDN，链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，作者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤其是脚本之家、码神岛等平台，谢谢配合。

第三块：WXSS
WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。

那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。

具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。

.title{
  font-size: 30px;
  color: royalblue;
}
.input-placeholder{
  font-size: 16px;
}
.section{
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 16px;
  display: flex;
}

第四块：JS
这一块毫无疑问，就是用来存放后端逻辑代码的，我们需要掌握几个常用的生命周期函数，onShow、onLoad。

Page({
  data: {
    msg: "hello zwz"
  },
  onl oad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
})

然后就是自定义方法，注意是和onLoad()平级。

比如，我们在WXML内定义一个按钮

按钮1
接着，在JS页面编写响应事件

Page({
  data: {
    msg: "hello zwz"
  },
  onl oad: function(options) {
    // 页面创建时执行
  },
  run: function() {
    // do some things
  },
})

那么，我们在点击这个按钮之后，就会触发run()这个方法。

五：总结
总而言之，本文讲解了微信小程序项目的基本架构，以及如何学习微信小程序，以及学习微信小程序所需要的基础，还有前台渲染的基本代码。

标签：function,07,04,WXML,JS,zwz,2021,WXSS,页面
来源： https://blog.csdn.net/ww137569622/article/details/115497029

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-04-07