微信小程序一站式基础干货讲解

`pages`	用来存放所有小程序的页面
`utils`	用来存放工具性质的模块（例如：格式化时间的自定义模块）
`app.js`	小程序项目的入口文件
`app.json`	小程序项目的全局配置文件
`app.wxss`	小程序项目的全局样式文件
`project.config.json`	项目的配置文件
`sitemap.json`	用来配置小程序以及页面是否允许被微信搜索到

这里我们就简单介绍一下目录、下载和创建项目，b站的视频一大把就不详细说明了

小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/

二、常用的视图容器类组件

view 组件
- 普通视图区域
- 类似于 HTML 中的 div ，是一个块级元素
- 常用来实现页面的布局效果
scroll-view 组件
- 可滚动的视图区域
- 常用来实现滚动列表效果
swiper 和 swiper-item 组件
- 轮播图容器组件和轮播图 item 组件

三、事件绑定

小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或者 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

target 和 currentTarget 的区别

target 是触发该事件的源头组件
currentTarget 则是当前事件所绑定的组件

e.target 指定的是触发事件的源头组件，因为 e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此 e.currentTarget 是当前的 view 组件

四、事件传参

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字

<view>
  <button type="primary" bindtap="bindTap2" data-num="{
   
   { 2 }}">
    + 2
  </button>
</view>


data: {
  count: 0
}
// count 值 + 2 处理
bindTap2 (e) {
  this.setData({
    count: this.data.count + e.target.dataset.num
  })
}

获取 input 中输入的值一般通过 e.detail.value 去拿到

五、修改data中的数据

我们只能通过this.setData({})去进行修改

//html
<view>
  <input value="{
   
   { msg }}" bindinput="setMsg" />
</view>


//js  实现文本框和 data 之间数据的同步
data: {
  msg: ``
}

setMsg (e) {
  this.setData({
    msg: e.detail.value
  })
}



//css
input {
  border: 1px solid lightcoral;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

六、条件判断if..elif..else和hidden

其实这两个东西就相当于vue中的v-if和v-show

iflese就是去动态创建标签去控制盒子显示隐藏

hidden是通过css中的display去控制盒子显示隐藏，频换切换咱们就使用hidden，反之使用这个ifelse

<view wx:if="{
   
   { true }}">
  <view>亚瑟</view>
  <view>妲己</view>
  <view>蒙恬</view>
</view>


<view hidden="{
   
   { false }}">
  条件为 true 隐藏，条件为 false 显示
</view>

七、wx:for

这个东西相当于vue中的v-for只是语法不同

使用如下：

<view wx:for="{
   
   { arr }}">
  索引是: {
   
   { index }}，数组的每一项是：{
   
   { item }}
</view>


data: {
  arr: ['亚瑟', '妲己', '蒙恬']
}



//wx:for 的 index 和 item 设置别称
<view wx:for="{
   
   { arr }}" wx:for-index="idx" wx:for-item="itemName">
  索引是: {
   
   { idx }}，数组的每一项是：{
   
   { itemName }}
</view>

这个vx:key，类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而添加渲染的效率

`八、rpx单位`

rpx（responsive pixel） 是微信小程序独有的，用来解决屏幕适配的尺寸单位

rpx 的实现原理
- rpx 是实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设置的屏幕，在宽度上 等分为 750 份，即 当前屏幕的总宽度为750 rpx
  - 在较小的设备上，1rpx 所代表的宽度较小
  - 在较大的设备上，1rpx 所代表的宽度较大
- 小程序在不同的设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而显示屏幕适配
- px和rpx的转换比例
- 以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素
- 也就是 1rpx = 0.5px = 1 物理像素

设备	`rpx` 换算 `px` (屏幕宽度/750)	`px` 换算 `rpx` (750/屏幕宽度)
`iPhone5`	`1rpx` = `0.42px`	`1px` = `2.34rpx`
`iPhone6`	`1rpx` = `0.5px`	`1px` = `2rpx`
`iPhone6 Plus`	`1rpx` = `0.552px`	`1px` = `1.81rpx`

九、微信顶部导航栏的配置

微信顶部导航栏 => 配置文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html一般来来进行微信顶部导航栏的配置

十、`tabBar底部导航菜单`

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；小程序中通常将其分为底部 tabBar 和顶部 tabBar

tabBar文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

十一、配置 request 合法域名

微信默认只能使用内置wx.request去发起请求，在发起请求之前我们需要去进行配置

1.只能请求 HTTPS 类型的接口
2.必须将接口的域名添加到信任列表中

我们可以在官网去配置信任域名列表、或者直接在开发者工具中去设置不校验合法域名

发起get请求

发起post请求