微信小程序框架---详细教程

最新推荐文章于 2025-04-12 23:40:47 发布

艳艳耶

最新推荐文章于 2025-04-12 23:40:47 发布

阅读量1.7k

点赞数 2

文章标签：小程序

本文链接：https://blog.csdn.net/2301_76988707/article/details/133840218

版权

🎬 艳艳耶✌️：个人主页

🔥 个人专栏：《Spring与Mybatis集成整合》《Vue.js使用》

⛺️ 越努力，越幸运。

3.2.1.使用 Page 构造器注册页面

3.2.2.在页面中使用 behaviors

3.2.3.使用 Component 构造器构造页面

1.框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1响应的数据绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

1.2.页面管理

框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。

1.3.基础组件

框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序。

1.4.丰富的 API

框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等

2.视图层 View

2.1.介绍

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

2.2WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

要完整了解 WXML 语法，请参考WXML 语法参考。

用以下一些简单的例子来看看 WXML 具有什么能力：

2.2.1.数据绑定

<view> {
  {message}}</view>

data: {
    message: 'Hello 艳艳耶✌!'
  })

效果展示：

2.2.2列表渲染

<view wx:for="{
  {array}}"> {
  {item}} </view>

data: {
    message: 'Hello 艳艳耶✌!',
    array:['炸鸡','汉堡','可乐','薯条','真好吃'],
  },

效果展示：

2.2.3条件渲染

<!--wxml-->
<view wx:if="{
  {view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{
  {view == 'APP'}}"> APP </view>
<view wx:else="{
  {view == 'MINA'}}"> MINA </view>

Page({
  data: {
    view: 'MINA'
  }
})

效果展示：

2.2.4模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {
  {firstName}}, LastName: {
  {lastName}}
  </view>
</template>
 
<template is="staffName" data="{
  {...staffA}}"></template>
<template is="staffName" data="{
  {...staffB}}"></template>
<template is="staffName" data="{
  {...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

效果展示：