【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
app.json和project.config.json，此外在pages/logs目录下还有一个logs.json，我们依次来说明一下它们的用途。app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "TCSAS","navigationBarTextStyle":"black"}}
project.config.json，您在开发者工具上做的任何配置都会写入到这个文件，当您重新安装工具或者换电脑工作时，您只要载入同一个项目的代码包，开发者工具就自动会帮您恢复到当时您开发项目时的个性化配置，其中会包括项目名字、代码上传时自动压缩等等一系列选项。page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置。app.json里边声明顶部颜色是蓝色即可。实际情况可能每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。WXML充当的就是类似HTML的角色。打开pages/index/index.wxml，您会看到以下的内容：<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}"> getUserInfo </button><block wx:else><image src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view></view>
HTML 非常相似，WXML由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：HTML 的时候，经常会用到的标签是 <div>, <p>, <span>，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。WXML用的标签是view,button,text等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。wx:if 这样的属性以及 {{ }} 这样的表达式JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户单击某个按钮的时候，JS会记录一些状态到JS变量里边，同时通过DOM API操控DOM的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，您的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。Hello World 的字符串显示在界面上。WXML需要这么写：<text>{{msg}}</text>
JS只需要管理状态即可：this.setData({ msg: "Hello World" })
if/else,for等控制能力，在小程序里边，这些控制能力都用 wx:开头的属性来表达。WXSS具有 CSS 大部分的特性，小程序在WXSS也做了一些扩充和修改。CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。app.json, page.json 的概念相同，您可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。WXSS 仅支持部分 CSS 选择器。JS 脚本文件来处理用户的操作。<view>{{ msg }}</view><button bindtap="clickMe">点击我</button>
button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：Page({clickMe: function() {this.setData({ msg: "Hello World" })}})
文档反馈