# miniprogram-template

**Repository Path**: kk_ah/miniprogram-template

## Basic Information

- **Project Name**: miniprogram-template
- **Description**: 小程序模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-19
- **Last Updated**: 2024-07-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 原生小程序通用模板
#### 目录结构说明
/assets	静态资源   /assets/less/common.less  全局less变量定义

/components 	自定义组件

/configs	配置文件

/utils	工具文件

/api 网络请求封装

/pages	页面目录

/app.json	小程序全局配置

/custom-tab-bar 自定义tabbar

/project.config.json	开发者工具配置 tabSize已修改为2 已配置支持less

/sitemap.json	微信内小程序搜索相关配置
#### 组件库 vant weapp
[介绍 - Vant Weapp (youzan.github.io)](https://youzan.github.io/vant-weapp/#/home)
### 原生小程序相关总结
#### 自定义自适应头部（更推荐使用组件实现）
```javascript
//app.js
App({
  onLaunch: function () {
    // 获取状态栏和标题栏高度
    const systemInfo = wx.getSystemInfoSync();
    const statusBarHeight = systemInfo.statusBarHeight * (750 / systemInfo.windowWidth);
    const titleBarHeight = 44 * (750 / systemInfo.windowWidth);
    this.globalData.statusBarHeight = statusBarHeight;
    this.globalData.titleBarHeight = titleBarHeight;
  },

  // 全局属性
  globalData: {
    // 状态栏高度
    statusBarHeight: 0,
    // 标题栏高度
    titleBarHeight: 0
  }
})

// 页面中
// 状态栏高度
statusBarHeight:app.globalData.statusBarHeight,
// 标题栏高度
titleBarHeight:app.globalData.titleBarHeight,
//  使用
style="height:{{titleBarHeight}}rpx"
<view style="padding-top:{{statusBarHeight}}rpx"></view>
```

#### 微信小程序中使用cookie
```
在微信小程序中使用weapp-cookie，可以让小程序支持cookie

具体看下面链接文章
https://juejin.cn/post/7007978224059678728
```

#### 微信小程序中数组响应式变化
```javascript
定义一个新数组 ，把老数组赋值给新数组，对新数组处理后赋值给老数组

例子：
let arr = new Array();
res.data.list.forEach(item => {
  let obj = {
    "value": item.id,
    "label": item.text
  }
  arr.push(obj);
})
this.setData({
  citys : arr,
})
```

#### IOS和安卓底部适配
```javascript
// IOS比安卓底部会多出来一部分

if (systemInfo.platform == 'ios') {
  this.globalData.isIOS = true
} else {
  this.globalData.isIOS = false
}

根据设备类型进行处理或者根据组件进行处理 （有更好的方法可以提供一下）
```

#### 小程序授权登录
```javascript
微信获取用户信息的api getuserInfo，getUserProfile都已废除

小程序授权只能通过后端拿到手机号

<button class="empowerBtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权用户信息</button>

getPhoneNumber必须使用上面的按钮才能获取

getPhoneNumber(e){
  if(e.detail.code){
    wx.showLoading({
      title: '登陆中',
    })
    wx.login({
      success: (res) => {
        // 登录接口
        login({
          code:e.detail.code,
          wxCode:res.code
        }
             ).then((res) => {
          if(res.code == 200){
            wx.setStorage({
              key:"token",
              data:res.token
            })
            wx.reLaunch({
              url: '/pages/home/home'
            })
          }

        })
      },
    })
  }
},
```

#### 小程序POST方式传递对象参数 会变成formData格式，使用GET请求方式时会变成query参数拼接在路径之后

#### 小程序自定义tabber时的注意事项

1.  新建文件夹custom-tab-bar 
2.  在app.json中的"tabBar"配置项目中配置 custom：true 
3.  最重要的一步，在tabbar的页面中加入如下代码，每一个tabber页面都要 
```javascript
// 每个tabbar页面的js的onShow生命周期函数onShow中
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
        //唯一标识（其它设置不同的整数）  
        current: '0'
    })
}
```


#### 小程序中自定义placeholder颜色和样式
```
wxml代码
<input type="text" placeholder="请输入" placeholder-class="placeholderStyle"></input>

wxss代码
.placeholderStyle{
  //样式
}
```

#### 小程序中类似vue的v-model语法
```html
<input type="text" model:value="{{ phone }}" bindinput="phoneInput"></input>

phoneInput (e) {
    console.log(e.detail.value);
    this.setData({ phone: e.detail.value })
},
```

#### 昵称头像填写
```html
// 头像选择
// 需要将微信小程序中自带的button组件的 open-type 的值设置为 chooseAvatar
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button>

// 昵称填写
// 需要将 input 组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
```

#### 小程序中使用计算属性
```javascript
npm install --production
npm install --save miniprogram-computed
点击微信开发者工具上方工具栏的 工具 -> 构建npm -> 构建完成点击确定即可

示例代码
const computedBehavior = require("miniprogram-computed").behavior;

Pages({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.a + data.b;
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      });
    },
  },
});
```

#### 小程序e.target与e.currentTarget
```
先说结论：
e.target是tap点击事件触发的对象（也就是点击的是谁）
e.currentTarget是事件绑定在哪个元素上（也就是这个事件在哪个组件上）

犹豫会有事件冒泡的行为发生，所以点击的元素和你绑定事件的元素可能不是同一个元素，就会导致一些bug。
```