微信小程序开发必备前置知识:基本代码构成与语法

简介: 【8月更文挑战第8天】微信小程序的基本代码构成与语法

项目的基本组成结构

官方预设模板

当我们采用测试号AppIDjavascript基础模板创建一个项目后
image.png
官方预设的模板如下
image.png
其每个目录的作用如下:

文件或文件夹名称 用途
pages 用来存放所有小程序的页面,如首页、日志页等。
utils 用来存放工具性质的模块(比如自己引入的一些库,公用方法封装)
app.js 小程序项目的入口文件,相当于vue项目的main.js
app.json 小程序项目的全局配置文件(如全局样式、定义页面路由等)
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引

pages页面

微信建议小程序的页面都存放在 pages 目录中,以单独的文件夹存在,如图所示:
image.png
每个页面由 4 个基本文件组成,它们分别是:

  • .js 文件 :同普通项目的js文件
  • .json 文件:当前页面的配置文件,如窗口的外观等
  • .wxml 文件:页面的模板结构文件,功能同html
  • .wxss 文件:当前页面的样式表文件,同css

    app.js入口文件

    app.js是小程序项目的入口文件,同vue项目的main.js。内部调用了微信API的App()方法。作为初学者,我们先不用管其函数内部的逻辑。
    ```javascript
    // app.js
    App({
    onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({

    success: res => {
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
    }
    

    })
    },
    globalData: {
    userInfo: null
    }
    })

## app.json全局配置
**app.json** 是当前小程序的全局配置,包括了小程序的所有**页面路径**、**窗口外观**、**界面表现**、**底部 tab** 等。官方预设模板内部的 app.json 配置内容如下:
```javascript
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这 4 个配置项的主要作用如下:
pages:小程序所有页面的路径,用来定义页面路由,非常重要!
window:全局定义小程序所有页面的背景色、文字颜色等
style:全局定义小程序组件所使用的样式版本
sitemapLocation:用来指明 sitemap.json 的位置

project.config.json项目配置文件

project.config.json 是项目配置文件,用来个性化配置小程序开发工具。类似于vue项目的package.json文件
image.png
如: setting 中是编译相关的配置 ,projectname 是项目名称, appid 中保存的是小程序的账号 ID。

sitemap.json 文件

sitemap.json 是微信用来索引小程序的一个配置文件,类似于 PC 网页的 SEO搜索。
可以参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

小程序页面创建及基础概念

新建小程序页面

我们只需要在 app.json -> pages 中新增页面的存放路径,开发者工具会帮我们自动创建对应的页面文件
GIF 2023-1-29 10-49-45.gif

提示:修改完代码后,需要使用ctrl + s进行代码保存

修改项目首页

调整 app.json -> pages 数组中页面路径的前后顺序,即可修改项目的首页。
GIF 2023-1-29 10-54-08.gif

WXML与HTML的区别

WXML是小程序仿照HTML设计的一套标签语言,用来构建小程序页面的结构。
它的主要区别有三个地方:

  • 标签名称不同

      WXML的标签和html不一样,常用的有view, text, image, navigator。
    
  • 属性节点不同

     WXML跳转方式是这样的:<navigator url="/pages/home/index"></navigator>
    
  • 提供了类似于 Vue 中的模板语法,如数据绑定、列表渲染、条件渲染等。

    WXSS 和 CSS 的区别

    新增了 rpx 尺寸单位
    WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算。
    提供了全局的样式和局部样式
    项目根目录中的 app.wxss 会作用于所有小程序页面,局部页面的 .wxss 样式仅对当前页面生效。
    WXSS 仅支持部分 CSS 选择器

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

小程序中的 .js 文件

小程序中的 JS 文件分为三大类,分别是:
app.js
小程序项目的入口文件,通过调用 App() 函数来启动整个小程序页面。
pages文件夹内的.js 文件
image.png
页面的入口文件,通过调用 Page() 函数来创建并运行页面
普通的 .js 文件
是普通的功能模块文件,可以自己封装一些方法或使用第三方的库。
image.png
如utils里面的eslint.js文件定义了代码的书写规范。

模板语法

在学习之前,我们需要了解每一个微信页面的初始化时做了什么。当我们手动创建一个页面时,这个页面对应的js文件暴露出一个page函数。

// pages/lists/lists.js
Page({
   
   

  //页面的初始数据
  data: {
   
   },
  //生命周期函数--监听页面加载
  onLoad(options) {
   
   },
  //生命周期函数--监听页面初次渲染完成
  onReady() {
   
   },
  //生命周期函数--监听页面显示
  onShow() {
   
   },
  //生命周期函数--监听页面隐藏
  onHide() {
   
   },
  //生命周期函数--监听页面卸载
  onUnload() {
   
   },
  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {
   
   },
  //页面上拉触底事件的处理函数
  onReachBottom() {
   
   },
  //用户点击右上角分享
  onShareAppMessage() {
   
   }
})

Page函数用于注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

属性 类型 说明
data Object 页面的初始数据
options Object 页面的组件选项,同 Component构造器

中的 options ,需要基础库版本 2.10.1 |
| behaviors | String Array | 类似于 mixins 和traits的组件间代码复用机制,参见 behaviors
,需要基础库版本 2.9.2 |
| onLoad | function | 生命周期回调—监听页面加载 |
| onShow | function | 生命周期回调—监听页面显示 |
| onReady | function | 生命周期回调—监听页面初次渲染完成 |
| onHide | function | 生命周期回调—监听页面隐藏 |
| onUnload | function | 生命周期回调—监听页面卸载 |
| onPullDownRefresh | function | 监听用户下拉动作 |
| onReachBottom | function | 页面上拉触底事件的处理函数 |
| onShareAppMessage | function | 用户点击右上角转发 |
| onShareTimeline | function | 用户点击右上角转发到朋友圈 |
| onAddToFavorites | function | 用户点击右上角收藏 |
| onPageScroll | function | 页面滚动触发事件的处理函数 |
| onResize | function | 页面尺寸改变时触发,详见 响应显示区域变化 |
| onTabItemTap | function | 当前是 tab 页时,点击 tab 时触发 |
| onSaveExitState | function | 页面销毁前保留状态回调 |
| 其他 | any | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。 |

数据绑定

微信小程序的数据绑定和vue几乎是一致的。只不过data是写在page函数里的。image.png

// pages/lists/lists.js
Page({
   
   
  data: {
   
   
      testInfo:"这是自定义的数据"
  },
})
<!--pages/lists/lists.wxml-->
<view>
  {
   
   {
   
   testInfo}}
</view>

不同的是,小程序的动态数据绑定和vue是不一致的,vue中,动态数据绑定是这样的

<template>
  <div :title="title"></div>
</template>

data: {
   
   
    title:"这是自定义的title值"
},

但小程序中的动态数据绑定还是采用花括号的形式
image.png

// pages/lists/lists.js
Page({
   
   
  data: {
   
   
     node:"<h1>动态富文本</h1>"
  },
})
<!--pages/lists/lists.wxml-->
<rich-text     nodes="{
   
   {node}}"></rich-text>

事件绑定

什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。image.png

    事件的使用方式

  • 在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。

<view bindtap="tapName"> Click me! </view>
  • 在相应的 Page 定义中写上相应的事件处理函数,参数是event。
    Page({
         
            tapName: function(event) {
         
              console.log(event)   } })
    
    可以看出,这里的bindtapvuev-on(即@)绑定事件是一致的。
相关文章
|
1月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
7天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
13天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
47 0
|
1月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
11天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
|
1月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
1月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
1月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。