【微信小程序】基础语法(下)

project.config.json的配置

小程序全局配置json文件中的checkSiteMap配置项通常用于指示开发者工具是否检查已下载的小程序主体文件中的sitemap.json的有效性。

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false,
    "checkSiteMap": true,
    "enhance": true,
    "babelSetting": {
      "ignore": [
        "utils/something_not_to_process.js",
        "miniprogram_npm/*",
        "utils/already_handle/*"
      ]
    }
  },
  "packOptions": {
    "ignore": []
  },
  "debugOptions": {}
}

页面导航

h5的页面导航  1)a 链接  2)location.href 

小程序中页面导航的两种方式

声明式导航

        在页面上声明一个<navigator>导航组件

        通过点击<navigator>组件实现页面跳转

导航到tabBar页面

tabBar 页面指的是被配置为 tabBar 的页面
在使用 <navigator> 组件跳转到指定的tabBar 页面时,需要指定 url属性和 open-type 属性,其中:

  • url 表示要跳转的页面的地址,必须以 / 开头
  • open-type 表示跳转的方式,必须为  switchTab

跳转到非tabBar页面 

在使用<navigator>组件跳转到普通的非tabBar页面时,则需要指定url属性和open-type属性,其中:

  • url 表示要跳转的页面的地址,必须以 / 开头
  • open-type 表示跳转的方式,必须为  navigate

后退导航

如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:

  • open-type 的值必须是 navigateBack,表示要进行后退导航
  • delta 的值必须是数字,表示要后进的层级

为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是1。

导航传参

编程式导航

        调用小程序的导航API,实现页面的跳转

导航到tabBar页面

调用 wx.switchTab(0biect obiect)方法,可以跳转到 tabBar 页面。

导航到非tabBar页面

 调用 wx.navigateTo(Object object)方法,可以跳转到非 tabBar的页面。

后退导航

调用wx.navigateBack方法,可以返回上一页面或多级页面

导航传参

接收参数

在onLoad中接收参数

页面事件

下拉刷新事件

配置下拉刷新窗口的样式

  • backgroundColor  用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
  • backgroundTextStyle 用来配置下拉刷新loading的样式,仅支持dark 和 light

监听页面的下拉刷新事件

停止下拉刷新的效果

wx.stopPullDownRefresh()  停止页面刷新

上拉触底事件

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

监听上拉触底事件 onReachBottom

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离

可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

生命周期

生命周期的分类

生命周期函数

生命周期函数的分类

应用的生命周期函数

页面的生命周期函数

WXS脚本

wxs的应用场景

wxml中无法调用在页面的.js中定义的函数,但是wxml中可以调用wxs中定义的函数。因此,小程序中wxs的典型应用场景就是“过滤器”

wxs 代码可以编写在 wxml文件中的 <wxs>标签内,就像 |avascript 代码可以编写在 html文件中的 <script>标签内一样。
wxml文件中的每个<wxs></wxs>标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在wxml中访问模块中的成员:

使用外联的wxs脚本

在 wxml 中引入外联的 wxs 脚本时,必须为 <wxs>标签添加 module 和 src 属性,其中:
·module 用来指定模块的名称
src 用来指定要引入的脚本的路径,且必须是相对路径

wxs的特点

<think>好的,用户想了解微信小程序基础语法教程。首先,我需要整理小程序基础语法结构,包括WXML、WXSS、JavaScript以及配置文件等部分。 首先,WXML是小程序的标记语言,类似HTML,但有自己的组件系统。需要介绍数据绑定、列表渲染、条件渲染和事件处理。例如,数据绑定用{{}},列表渲染用wx:for,条件渲染用wx:if,这些是基础中的基础,必须详细说明。 接下来是WXSS,也就是样式表语言。需要说明它和CSS的区别,比如rpx单位,以及样式导入的方式。此外,提到全局样式和局部样式的区别,这样用户能理解样式的覆盖规则。 然后是JavaScript部分,小程序的逻辑层。需要介绍页面生命周期函数,如onLoad、onShow等,还有事件处理函数的写法。特别要注意的是,WXS和JavaScript的区别,用户可能容易混淆,需要澄清WXS的用途和限制,比如不能调用小程序API,只能处理数据。 配置文件方面,app.json的全局配置和页面json文件的局部配置是重点。要列出常见的配置项,如pages、window、tabBar等,让用户知道如何配置页面路径和窗口样式。 另外,用户提供的引用中提到sitemap.json和WXS的循环语法,虽然引用可能不完全相关,但需要适当融入。比如在讲WXS时,可以提到循环语法与JavaScript类似,如例19所示[^2],同时提到sitemap.json用于SEO配置,允许微信索引页面[^1]。 还要考虑用户可能遇到的问题,比如语法错误、数据绑定失效、样式不生效等,给出常见问题的解决方法,增强教程的实用性。最后,生成相关问题,帮助用户进一步学习,比如WXML和HTML的区别、如何调试小程序等。 确保整个回答结构清晰,分点说明,使用正确的LaTeX格式,比如变量用$data,代码块用正确语法,并参考用户提供的引用适当标注来源。避免使用复杂术语,保持语言简洁易懂,适合刚入门的开发者。</think>### 微信小程序基础语法教程 微信小程序开发基于**WXML**(页面结构)、**WXSS**(页面样式)、**JavaScript**(逻辑层)和**JSON**(配置文件)四种文件类型,以下是核心语法要点: --- #### 1. WXML 模板语法 - **数据绑定**:使用双花括号 `{{}}` 包裹变量 ```html <view>{{message}}</view> ``` - **列表渲染**:通过 `wx:for` 遍历数组,`wx:key` 指定唯一标识 ```html <view wx:for="{{list}}" wx:key="index">{{item.name}}</view> ``` - **条件渲染**:使用 `wx:if`、`wx:elif`、`wx:else` 控制元素显示 ```html <view wx:if="{{show}}">显示内容</view> ``` - **事件绑定**:通过 `bind` 或 `catch` 绑定事件(如点击事件) ```html <button bindtap="handleClick">点击</button> ``` --- #### 2. WXSS 样式语法 - **尺寸单位**:使用 `rpx` 实现响应式布局(1rpx ≈ 屏幕宽度的1/750) ```css .container { width: 750rpx; /* 占满屏幕宽度 */ color: #333; } ``` - **样式导入**:通过 `@import` 引入外部样式 ```css @import "common.wxss"; ``` - **全局与局部样式**:`app.wxss` 为全局样式,页面 `.wxss` 文件为局部样式。 --- #### 3. JavaScript 逻辑层 - **页面生命周期**:包括 `onLoad`(加载)、`onShow`(显示)、`onReady`(渲染完成)等 ```javascript Page({ data: { message: "Hello" }, onLoad() { console.log("页面加载") }, handleClick() { this.setData({ message: "Clicked!" }) } }); ``` - **数据更新**:必须通过 `this.setData()` 修改数据以触发视图更新[^2]。 --- #### 4. JSON 配置文件 - **全局配置**(`app.json`):定义页面路径、窗口样式、网络超时等 ```json { "pages": ["pages/index/index"], "window": { "navigationBarTitleText": "首页" } } ``` - **页面配置**(`index.json`):覆盖全局配置的局部设置。 --- #### 常见问题解决 - **语法错误**:检查 JSON 文件是否包含注释(小程序 JSON 不支持注释) - **数据绑定失效**:确保使用 `this.setData()` 更新数据 - **样式冲突**:优先使用局部样式或提高选择器优先级 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值