Lfangq Site

外观

微信小程序

2398字约8分钟

2025-02-13

微信小程序有几个文件

详情

微信小程序通常由以下几种类型的文件构成，它们共同支撑起小程序的完整功能与界面展示：

1. .json 配置文件

  • app.json：作为小程序的全局配置文件，它掌控着小程序的整体框架结构，涵盖了页面路径、窗口表现、底部 tab 栏等关键配置信息。
{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    }
}
  • page.json：每个页面都有对应的 .json 文件，用于对该页面进行局部配置，这些配置会覆盖 app.json 里的全局配置。
{
    "navigationBarTitleText": "首页"
}

2. .wxml 模板文件

这是小程序的视图模板文件，和 HTML 类似，用于构建小程序的页面结构。借助标签和数据绑定，能实现页面的动态展示。

<view class="container">
    <text>{{message}}</text>
    <button bindtap="onTap">点击我</button>
</view>

3. .wxss 样式文件

它的作用是为小程序的页面添加样式，和 CSS 功能类似。可以定义元素的布局、颜色、字体等样式属性。

4. .js 脚本文件

用于实现小程序的逻辑功能，包括事件处理、数据请求、页面交互等。

微信小程序怎样跟事件传值

详情

在微信小程序里，向事件传值有多种方式，下面为你详细介绍：

1. 通过 data-* 属性传值

可以在组件上添加 data-* 属性，然后在事件处理函数里通过 event.currentTarget.dataset 来获取这些数据。

2. 利用全局变量传值

把需要传递的值存到全局变量里，然后在事件处理函数中获取。

// app.js
App({
  globalData: {
    myValue: '这是一个全局值'
  }
})

3. 通过自定义事件传值

在自定义组件中，可以使用自定义事件来传递数据。

小程序的 wxss 和 css 有哪些不一样的地方?

详情

小程序的 wxss（WeiXin Style Sheets）和传统的 css 在功能上有相似之处，都是用于控制页面元素的样式，但也存在一些不同点，以下为你详细介绍：

1. 尺寸单位

  • rpx 单位：wxss 引入了 rpx（responsive pixel）单位，它是一种响应式的尺寸单位，小程序会根据不同设备的屏幕宽度进行自适应缩放。规定屏幕宽度为 750rpx，例如在 iPhone 6 上，屏幕宽度为 375px，那么 1rpx 就等于 0.5px。这使得开发者可以更方便地实现不同设备上的页面布局适配。
  • css 单位：css 常用的尺寸单位有 px（像素）、em、rem、% 等，虽然也可以实现响应式布局，但相对来说没有 rpx 那么直观和便捷。

2. 样式导入

  • @import 规则：wxss 中使用 @import 规则导入样式文件时，路径需要使用相对路径，并且文件扩展名 .wxss 不能省略。
  • css 导入：css 中使用 @import 导入样式文件时，路径可以是相对路径或绝对路径，文件扩展名 .css 可以省略。

3. 选择器支持

  • 部分选择器受限：wxss 支持大部分 css 选择器，但有一些选择器在小程序中不被支持，例如属性选择器中的一些高级用法，像 [attr*=value]（属性值包含指定字符串）等。

4. 全局样式和局部样式

  • 全局样式：在小程序中，app.wxss 是全局样式文件，其中定义的样式会应用到所有页面。
  • 局部样式：每个页面的 .wxss 文件是局部样式文件，只对当前页面生效。并且局部样式会覆盖全局样式中相同的样式规则。

5. 样式隔离

  • 自定义组件样式隔离：小程序的自定义组件有样式隔离的特性，默认情况下，组件的样式只作用于组件内部，不会影响到外部页面和其他组件。可以通过 styleIsolation 属性来控制样式隔离的模式，有 isolated（默认，完全隔离）、apply-shared（页面样式可影响组件，但组件样式不影响页面）、shared（页面样式和组件样式相互影响）三种模式。

小程序关联微信公众号如何确定用户的唯一性

详情

当小程序关联微信公众号时，可通过以下几种方法来确定用户的唯一性：

1. OpenID

  • 原理：OpenID 是微信为每个用户在每个应用（小程序或公众号）内分配的唯一标识符。同一用户在不同小程序或公众号中的 OpenID 是不同的，但可以通过 UnionID 进行关联。
  • 获取方式：
    • 小程序：通过调用微信提供的登录接口 wx.login 获取临时登录凭证 code，然后将 code 发送到开发者服务器，在服务器端使用 code 换取用户的 session_key 和 openid。
    • 公众号：在用户授权的情况下，通过网页授权接口获取用户的 openid。

2. UnionID

  • 原理：如果多个小程序或公众号都绑定到了同一个微信开放平台账号下，那么同一用户在这些应用中的 UnionID 是相同的。通过 UnionID 可以在不同应用间唯一标识用户。
  • 获取方式：
    • 当用户在小程序或公众号中进行授权登录时，如果该应用已经绑定到了微信开放平台，且用户已经关注了公众号或在小程序中进行了授权，那么可以在获取用户信息时同时获取到 UnionID。
    • 例如，在小程序中使用 wx.getUserInfo 接口，在用户授权后可以获取到包含 UnionID 的用户信息。

3. 数据库存储

  • 原理：将用户的 OpenID 或 UnionID 存储在开发者的数据库中，并为每个用户分配一个唯一的用户 ID。在后续的业务逻辑中，使用该用户 ID 来标识用户。
  • 示例：
    • 在用户登录时，将用户的 OpenID 或 UnionID 发送到服务器，服务器根据这些信息在数据库中查找对应的用户记录。如果记录不存在，则创建新的用户记录，并返回一个唯一的用户 ID 给客户端；如果记录存在，则直接返回该用户的用户 ID。

微信小程序与vue区别

详情

微信小程序和 Vue 都是用于构建用户界面的技术，但它们在多个方面存在区别，以下为你详细介绍：

1. 框架定位与应用场景

  • 微信小程序：是微信平台提供的一套开发框架，用于在微信内开发轻量级应用。其开发的应用主要运行在微信环境中，具有快速加载、无需下载安装等特点，适合开发与微信生态紧密结合的应用，如电商小程序、餐饮点餐小程序等。
  • Vue：是一个渐进式 JavaScript 框架，可用于构建各种类型的 Web 应用，包括单页面应用（SPA）、多页面应用（MPA）等。Vue 可以在浏览器、移动端、桌面应用等多种环境中使用，具有更广泛的应用场景。

2. 语法和模板

  • 微信小程序：使用自己的一套模板语法，如 .wxml 用于构建页面结构，类似于 HTML；.wxss 用于设置样式，类似于 CSS；.js 用于实现逻辑。模板语法中使用 进行数据绑定，使用 wx:if、wx:for 等指令进行条件渲染和列表渲染。
  • Vue：使用 HTML 模板语法，结合 Vue 指令（如 v-if、v-for、v-bind 等）进行数据绑定和渲染。Vue 还支持 JSX 语法，提供了更灵活的模板编写方式。

3. 组件化开发

  • 微信小程序：支持组件化开发，通过 component 配置文件来定义组件。组件之间的通信主要通过 properties、events 和 behaviors 来实现。
  • Vue：组件化是其核心特性之一，通过 .vue 文件来定义组件。组件之间的通信方式更加丰富，包括 props、emit、emit、parent、children、children、refs、event bus、Vuex 等。

4. 状态管理

  • 微信小程序：没有内置的状态管理库，开发者可以通过全局变量、事件广播等方式来实现简单的状态管理。对于复杂的应用，可能需要引入第三方库。
  • Vue：有官方推荐的状态管理库 Vuex，用于管理应用的状态。Vuex 采用单向数据流的设计思想，使得状态的变化更加可预测和易于调试。

5. 路由管理

  • 微信小程序：有自己的路由机制，通过 app.json 配置文件来定义页面路径。小程序的路由是由框架管理的，开发者可以使用 wx.navigateTo、wx.redirectTo 等 API 来进行页面跳转。
  • Vue：有官方的路由库 vue-router，用于实现单页面应用的路由功能。vue-router 支持路由导航守卫、路由懒加载等高级特性。
  1. 生态系统
  • 微信小程序：拥有丰富的微信生态资源，如微信支付、微信登录、分享等功能。开发者可以方便地集成这些功能，快速开发出具有社交和支付能力的应用。
  • Vue：拥有庞大的开源社区和丰富的插件生态系统，开发者可以根据需要选择各种插件来扩展应用的功能，如 UI 组件库、表单验证库、图表库等

Copyright©2019-present Lfangq