再学微信小程序

1 微信小程序有几个文件

微信小程序主要包含以下几个文件：

.wxml（WeiXin Markup Language）：用于描述小程序的页面结构，类似于 HTML。在这个文件中，可以使用小程序提供的组件和自定义的组件，以及使用数据绑定和逻辑控制语句来构建页面的结构。
.wxss（WeiXin Style Sheets）：是一套样式语言，用于描述 .wxml 文件中组件的样式。类似于 CSS，可以设置元素的样式、布局、动画效果等。
.js：小程序的逻辑处理文件，包含了页面的逻辑代码。可以在这个文件中定义页面的事件处理函数、数据的处理和操作等。通过 JavaScript 的逻辑控制，可以实现小程序的交互功能。
app.json：小程序的全局配置文件，必须存在于小程序项目中。在这个文件中，可以进行页面的注册，设置小程序的窗口样式，配置底部导航栏（tabBar），以及设置网络请求等。
app.js：小程序的全局 JavaScript 文件，用于监听和处理小程序的生命周期函数、声明全局变量等。可以在这个文件中编写全局的逻辑代码。
app.wxss：小程序的全局样式文件，用于设置小程序全局的样式。可以在这个文件中定义小程序的全局样式，如页面的背景色、字体样式、导航栏样式等。

以上是微信小程序中常见的文件类型，每个文件都有其特定的作用和功能，通过不同类型的文件协同工作，可以构建出完整的微信小程序应用。

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

在微信小程序中，可以通过以下方式实现事件传值：

使用 data-* 属性：给 HTML 元素添加自定义的 data-* 属性来传递需要的值。例如，可以在某个元素上添加 data-id 属性来传递对应的 ID 值。在事件处理函数中，可以通过 event.currentTarget.dataset 来获取这些属性值。
```
<view data-id="123" bindtap="handleTap">点击我</view>
```
```
Page({handleTap(event) {const id = event.currentTarget.dataset.id;console.log(id); // 输出：123}
})
```

使用自定义属性：在小程序中可以给 HTML 元素添加自定义属性，然后在事件处理函数中通过 event.currentTarget.dataset 或 event.currentTarget.id 来获取这些属性值。

<view id="my-element" data-id="123" bindtap="handleTap">点击我</view>

Page({handleTap(event) {const id = event.currentTarget.dataset.id;const elementId = event.currentTarget.id;console.log(id); // 输出：123console.log(elementId); // 输出：my-element}
})

使用 event.detail：对于一些特定的事件，例如表单的提交事件 bindsubmit，可以通过 event.detail 来获取额外的参数值。

<form bindsubmit="handleSubmit"><input name="username" placeholder="请输入用户名" /><input name="password" type="password" placeholder="请输入密码" /><button type="submit">提交</button>
</form>

Page({handleSubmit(event) {const { username, password } = event.detail.value;console.log(username, password); // 输出：输入的用户名和密码}
})

通过以上方法，可以在微信小程序中实现事件传值，并在事件处理函数中获取传递的值，以实现更灵活的交互和数据处理。

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

小程序的 WXSS（WeiXin Style Sheets）和 CSS（Cascading Style Sheets）在语法和功能上有一些不同之处：

图片引入方式：在 WXSS 中，图片引入需要使用外链地址，即通过网络地址加载图片，而不能使用相对路径或本地文件路径。
```
/* WXSS */
.image {background-image: url("https://example.com/image.jpg");
}
```

缺少 body 元素：小程序中没有 body 元素，样式可以直接写在页面的组件选择器上。

<!-- WXML -->
<view class="container"><text class="text">Hello, Mini Program!</text>
</view>

/* WXSS */
.container {background-color: #f5f5f5;
}.text {color: #333;font-size: 14px;
}

样式导入方式：小程序中的样式文件可以使用 @import 导入其他样式文件。
```
/* WXSS */
@import "common.wxss";.container {/* styles */
}
```
不支持部分 CSS 属性和选择器：小程序的 WXSS 并不完全支持所有的 CSS 属性和选择器，例如不支持浮动（float）和定位（position）属性，也不支持伪类选择器（:hover、:before 等）和部分伪元素选择器。
```
/* WXSS */
.container {/* 不支持的属性 *//* 不支持的伪类选择器 */
}
```

需要注意的是，虽然 WXSS 和 CSS 在一些语法和功能上存在差异，但在基本的样式定义和样式属性上，它们仍然具有相似性，并可以使用类似的语法和规则进行样式的定义和控制。

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

在小程序中，如果要确定用户的唯一性并与微信公众号关联，可以使用以下步骤：

在小程序中调用 wx.login 方法获取用户的临时登录凭证 code。
将获取到的 code 发送到后端服务器。
后端服务器通过 code 调用微信开放平台的接口，如 https://api.weixin.qq.com/sns/jscode2session，获取用户的 openid 和 session_key。
后端服务器将 openid 返回给小程序前端，并存储在客户端。
在小程序中调用 wx.getUserInfo 方法获取用户信息，包括 encryptedData 和 iv。
将获取到的 encryptedData 和 iv 发送到后端服务器。
后端服务器使用用户的 session_key 对 encryptedData 进行解密，获取用户的 unionId。
将用户的 unionId 与用户的其他信息一起存储在后端服务器，用于唯一标识用户并与微信公众号关联。

需要注意的是，获取用户的 unionId 需要满足以下条件：

小程序需要通过微信开放平台的方式进行接入，而不是独立的小程序账号。
小程序和微信公众号需要在同一个微信开放平台账号下，且已经完成了关联。
用户在小程序和微信公众号之间需要存在关联关系，例如用户曾经在微信公众号中授权过。

通过以上步骤，可以确定用户的唯一性并与微信公众号进行关联。后续的操作中，可以根据用户的 unionId 进行个性化的业务逻辑处理。

5 微信小程序与vue区别

微信小程序和Vue在一些方面确实存在一些差异，以下是它们之间的一些区别：

生命周期：微信小程序的生命周期相对简单，包括onLoad、onShow、onReady、onHide、onUnload等几个基本生命周期函数。而Vue拥有更为丰富的生命周期钩子函数，例如created、mounted、updated、destroyed等。
数据绑定语法：微信小程序使用{{}}来进行数据绑定，而Vue使用简洁的v-bind和v-model指令来实现数据绑定。
元素显示和隐藏：在微信小程序中，可以使用wx-if和hidden来控制元素的显示和隐藏；而在Vue中，可以使用v-if和v-show来实现相同的功能。
事件处理：微信小程序中使用bindtap或catchtap来绑定事件处理函数，而Vue使用v-on或@来绑定事件处理函数。
数据双向绑定：在Vue中，可以通过使用v-model指令实现表单元素与数据的双向绑定，而微信小程序需要手动获取表单元素的值并将其赋给对应的数据变量。