微信小程序基础知识点

• 微信小程序有哪些比较重要的文件
• 微信小程序事件如何传参数数
  • 使用 data- 属性：
  • 使用自定义事件和 detail 属性：
• 小程序的 wxss 和 css 有哪些不⼀样的地方？
• 小程序关联微信公众号如何确定用户的唯⼀性
• 微信小程序与vue区别

微信小程序有哪些比较重要的文件

• JSON 文件：用于配置小程序的全局配置信息，例如小程序的名称、页面路由等。

• WXML 文件：类似于 HTML，用于编写小程序的页面结构。

• WXSS 文件：类似于 CSS，用于编写小程序的页面样式。

• JavaScript 文件：用于编写小程序的逻辑代码，处理用户交互、数据请求等功能。

• 图片文件（例如 JPG、PNG 等格式）：用于存储小程序中需要展示的图片资源。

• app.json 必须要有这个文件， 如果没有这个文件，项目无法运行， 因为微信框架把这个
  作为配置文件⼊⼝ ，整个小程序的全局配置 。包括页面注册， 网络设置， 以及小程序的
  window 背景色， 配置导航条样式， 配置默认标题。

• app.js 必须要有这个文件，没有也是会报错！但是这个文件创建⼀下就行 什么都不需要
  写以后我们可以在这个文件中监听并处理小程序的生命周期函数 、声明全局变量。

• app.wxss 配置全局 css

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

微信小程序事件如何传参数

在微信小程序中，事件传递参数有两种常见的方法：

使用 data- 属性：

可以在触发事件的组件上使用 data- 属性将参数传递给事件处理函数。

<view data-param="参数值" bindtap="handleTap">点击触发事件view>

// 在事件处理函数内
handleTap: function(event) {
  var param = event.currentTarget.dataset.param; // 获取参数值
  console.log(param);
}

在事件处理函数中，通过 event.currentTarget.dataset.param 可以获取到传递的参数值。

使用自定义事件和 detail 属性：

通过自定义事件的方式传递参数。

在微信小程序中，可以使用事件传值的方式实现组件之间的数据传递。以下是一种常见的跟事件传值的方法：

1. 在触发事件的组件内，定义一个自定义事件，并通过 triggerEvent 方法触发该事件，同时传递需要传递的值。

   // 在触发事件的组件内
   Component({
     // ...
     handleEvent: function(e) {
       var value = '传递的值'; // 需要传递的值
       this.triggerEvent('CustomEventName', { value: value });
     }
   })
   

2. 在接收事件的组件内，通过在模板中绑定该自定义事件，并定义一个事件处理函数来接收传递的值。

   // 在接收事件的组件内
   Component({
     // ...
     methods: {
       handleCustomEvent: function(e) {
         var value = e.detail.value; // 接收传递的值
         // 处理接收到的值
         console.log(value);
       }
     }
   })
   

3. 在模板中将自定义事件绑定到相应的组件上，并指定事件处理函数。

   
   <view>
     <custom-component bind:CustomEventName="handleCustomEvent">custom-component>
   view>
   

小程序的 wxss 和 css 有哪些不⼀样的地方？

wxss（微信小程序样式表）和 CSS（层叠样式表）在语法和使用上有一些不同之处。

WXSS和CSS之间没有太大的区别, 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

以下是它们的一些不同之处：

1. 选择器：wxss 支持 CSS 选择器，如类选择器（.class）、ID 选择器（#id）、标签选择器（Element）等。

2. 尺寸单位：wxss 中的尺寸单位只支持 px（逻辑像素）和 rpx（响应式像素），rpx 可以根据屏幕的宽度进行自适应，适合各种不同尺寸的设备展示。

3. 样式导入：wxss 不支持 @import 导入外部样式表，必须直接在每个页面的 wxss 文件中编写样式。

4. 全局样式：在小程序中可以定义一个 app.wxss 文件，其中的样式将作用于全局，而不需要每个页面都引入。

5. 样式覆盖： 在小程序开发中，样式有优先级的概念，即同一元素上定义的多个样式时会根据优先级进行覆盖，具体优先级规则与 CSS 相似，但有一些微小的差异。

6. 动画效果：wxss 提供了一套封装好的动画库，通过定义一些简单的属性和关键帧，可以实现一些动画效果，使用起来比 CSS 动画简单。

7. wxss 的图片引⼊需使用外链地址

8. **没有 Body **；样式可直接使用 import 导⼊

wxss 是小程序独有的样式语言，只能在微信小程序中使用，而 CSS 则是 Web 开发中通用的样式表语言。

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

在小程序关联微信公众号后，可以通过以下方式确定用户的唯一性：

1. 用户的OpenID：在用户使用微信登录小程序或微信公众号时，都会获取到一个OpenID。通过获取和比对用户在小程序和微信公众号中的OpenID，可以确定同一个用户。

2. UnionID：如果用户已经在微信公众平台中进行了授权，即使在不同的小程序中，也可以使用同一个UnionID来确定该用户的唯一性。

使用 wx.getUserInfo ⽅法 withCredentials 为 true 时 可获取encryptedData ， 里面有 union_id 。
后端需要进行对称解密

获取用户的OpenID和UnionID需要在开发小程序和微信公众号时，在后台进行配置和接口调用，需要保障用户隐私和信息安全。

微信小程序与vue区别

微信小程序和Vue是两个不同的概念，它们之间存在一些区别。

下面是它们的主要区别：

1. 平台：微信小程序是一种在微信平台上运行的应用程序，只能在微信环境中使用。而Vue是一种用于构建Web应用程序的JavaScript框架，可以在多个浏览器和设备上运行。

2. 技术栈：微信小程序使用的是一套独立的开发框架和语法规范，主要使用JavaScript、WXML（类似HTML）、WXSS（类似CSS）进行开发。而Vue是基于JavaScript的框架，采用MVVM（Model-View-ViewModel）架构，通过Vue组件、模板和数据绑定等特性实现页面渲染和交互。

3. 开发方式：微信小程序的开发过程需要使用微信提供的开发工具和相关API接口进行开发、调试和发布。而Vue可以与其他前端技术配合使用，如Webpack、Vue Router、Vuex等，可灵活选择开发工具和部署方式。

4. 生态系统：微信小程序具有独立的生态系统，包括微信开放平台、小程序商店、支付、社交等功能，可以直接在微信平台上获取用户和资源。Vue则属于Web开发领域，对于构建Web应用程序提供了更多的选择和集成。

对于想要在微信平台发布应用程序的开发者来说，微信小程序是一个非常合适的选择。而Vue更适合构建多平台、多设备的Web应用程序。

另一种角度

• 生命周期不⼀样，微信小程序生命周期比较简单
• 数据绑定也不同，
  • 微信小程序数据绑定需要使用 {{}} ，
  • vue 直接 : 就可以
• 显示与隐藏元素，
  • vue 中，使用 v-if 和 v-show 控制元素的显示和隐藏，
  • 小程序中，使用 wx-if 和 hidden 控制元素的显示和隐藏
• 事件处理不同，
  • 小程序中，全用 bindtap(bind+event) ， 或者catchtap(catch+event) 绑定事件,
  • vue： 使用 v-on:event 绑定事件， 或者使用@event 绑定事件
• 数据双向绑定也不⼀样
  • vue 中,只需要再表单元素上加上 v-model ,然后再绑定data 中对应的⼀个值， 当表单元素内容发生变化时， data 中对应的值也会相应改变，这是 vue 非常 nice 的⼀点 。
  • 微信小程序必须获取到表单元素， 改变的值，然后再把值赋给⼀个 data 中声明的变量。