📢 大家好，我是小丞同学，一名大二的前端爱好者 📢 这篇文章将介绍小程序的基础内容 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏 📢 愿你忠于自己，热爱生活 前言 本文将从零开始介绍微信小程序基础内容，有助于对微信小程序有个全局了解，对一些配置有更好的理解和实战 一、小程序配置文件 小程序有两种配置文件，全局的[代码]app.json[代码]和页面单独的[代码]page.json[代码] 注意：配置文件中不能出现注释 1.1 全局配置 app.json 官方文档 小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab。 举个例子 [图片] 这是之前学的项目的配置文件的一部分 各字段的含义 [代码]pages[代码]字段 —— 用于描述当前小程序所用页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录 [代码]window[代码]字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义，导航文字 [代码]tabBar[代码]字段 —— 定义小程序的底部导航栏样式 [代码]tabBar[代码] 配置属性 [图片] 1.2 页面配置 page.json 每一个小程序页面也可以使用 [代码].json[代码] 文件来对本页面的窗口表现进行配置。 可以独立定义每个页面的一些属性，如顶部颜色、下拉刷新等等 注意：如果有与[代码]app.json[代码]文件相同的配置项，页面中的配置项将会覆盖[代码]app.json[代码]中[代码]window[代码]中的配置项 [图片] 1.3 sitemap.json 配置 ⼩程序根⽬录下的 [代码]sitemap.json[代码] ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。 二、wxml语法 2.1 数据绑定 2.1.1 普通写法 [代码]wxml[代码]文件中的模板语法 [图片] 在同页面下的[代码]js[代码]中传入模板数据 [图片] 2.1.2 组件属性 模板语法 [代码]<view id="item-{{id}}"> </view> [代码] 数据传递 [代码]Page({  data: {    id: 0 } }) [代码] 2.1.3 bool 类型 不能直接写 checked = “false”，该计算结果为字符串 [代码]<checkbox checked="{{false}}"> </checkbox> [代码] 2.2 运算 2.2.1 三元运算 [图片] 2.2.2 算数运算 [图片] [图片] 2.2.3 逻辑判断 采用[代码]wx:if[代码] 来判断是否需要渲染该代码块： [代码]<view wx:if="{{length > 5}}"> </view> [代码] 也可以采用[代码]wx:elif[代码]和[代码]wx:else[代码]来添加一个[代码]else[代码]块 [代码]<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> [代码] 注意：如果需要控制多个组件标签，可以使用[代码]block[代码]标签将多个组件包装起来，给[代码]block[代码]加上控制属性 注意： [代码]<block/>[代码] 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性 2.2.4 字符串运算 [代码]<view>{{"hello" + name}}</view> [代码] [代码]//page中的js文件 Page({  data:{    name: 'MINA' } }) [代码] 注意：花括号和引号之间如果有空格，将最终被解析成为字符串 2.3 列表渲染 2.3.1 wx:for 默认数组的当前项的下标变量名默认为 [代码]index[代码]，数组当前项的变量名默认为 [代码]item[代码] [代码]<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> [代码] [代码]array: [{ message: 'foo', }, { message: 'bar' }] [代码] [图片] 由于未设置[代码]wx:key[代码]属性因此会有警告，提示采用[代码]wx:key[代码]来提高性能 [代码]wx:key[代码]绑定的值有几种选择 [代码]string[代码]类型，表示循环项中的唯一属性 保留字[代码]*this[代码]，表示[代码]item[代码]本身，代表唯一的字符串和数组 [图片] 2.4 条件渲染 2.4.1 hidden [代码]<view hidden="{{condition}}"> True </view> [代码] 类似[代码]wx:if[代码]，频繁切换用[代码]hidden[代码]，不常使用[代码]wx:if[代码] 三、事件绑定 通过bind关键字来实现。如 [代码]bindtap[代码] 、[代码]bindinput[代码] 、[代码]bindchange[代码] 等 给[代码]input[代码]绑定输入事件 [代码]<input type="text" bindinput="handleInput"/> [代码] 事件处理函数，将这个数据映射到 data 数据中 [代码]handleInput(e) { this.setData({ num: e.detail.value }) } [代码] 3.1注意事项 绑定事件时不能带参数，不能带括号，以下错误示范 [代码]<input bindinput="handleInput(100)" /> [代码] 事件传值，通过标签自定义属性的方式和[代码]value[代码] [代码]<input bindinput="handleInput" data-item="100" /> [代码] 事件触发时获取数据 [代码]  handleInput: function(e) {    // {item:100}   console.log(e.currentTarget.dataset)    // 输入框的值   console.log(e.detail.value); } [代码] 四、wxss 样式 wxss 扩展特性 响应式长度单位[代码]rpx[代码] 样式导入 4.1 尺寸单位 [代码]rpx[代码]: 可以根据屏幕宽度进⾏⾃适应 使⽤步骤： 确定设计稿宽度 [代码]pageWidth[代码] 计算⽐例 [代码]750rpx = pageWidth px[代码] ,因此 [代码]1px=750rpx/pageWidth[代码] 在 less ⽂件中，只要把设计稿中的 [代码]px => 750/pageWidth rpx[代码] 即可。 4.2 样式导入 使⽤[代码]@import[代码] 语句可以导⼊外联样式表，只⽀持相对路径。 [代码]@import "common.wxss"; .middle-p {  padding:15px; } [代码] 4.3 选择器 不支持通配符选择器[代码]*[代码] 仅支持以下选择器 [图片] 好忙，好忙，好忙~