# bilin

**Repository Path**: tangqiangitee/bilin

## Basic Information

- **Project Name**: bilin
- **Description**: 比邻小程序，工具：微信开发者工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-06
- **Last Updated**: 2023-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 比邻小程序开发文档（前端）

## 相关文档

丢前面容易查看

前端仓库：[bilin](https://gitee.com/Chen-zyi/bilin/invite_link?invite=233cf469c680b155f642715a5f13f4b5909b2da95474e762e511b1509403e86e75a04b58f31328f45a2fd10c1567b6cd)（分支说明：合并分支、解决冲突、功能测试：dev，功能稳定的dev再合并到master上。）

接口文档：[接口](https://www.apifox.cn/web/invite?token=V1A0g_O9QYyb78CZaEHw-)

需求文档：[比邻需求 - 飞书云文档 (feishu.cn)](https://sk057mv7km.feishu.cn/docx/Sgtydaz5ToCHQmxCpoOcvSaun4c)

设计文档：[Figma](https://www.figma.com/file/gEn4GOJR35iJ5IX7Cnq06K/比邻?node-id=0%3A1&t=TuQGoWqSUbFNHTrZ-1)

小程序组件：[小程序组件](https://developers.weixin.qq.com/miniprogram/dev/component/)

vant组件：[Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/#/home)（版本：1.10.11）

## 环境配置

开发工具

- 微信开发者工具：Stable 1.06.2209190

新建项目（记录）

- 项目名称：bilin

- AppID：wx5306a7074a774b28
- 开发模式：小程序
- 后端服务：不使用云服务
- 模板选择：JavaScript模板-基础模板

项目本地设置

- 调试基础库：2.29.0
- 不校验合法域名

## 代码规范

代码规范：[https://www.runoob.com/js/js-conventions.html](https://gitee.com/link?target=https%3A%2F%2Fwww.runoob.com%2Fjs%2Fjs-conventions.html)

格式化工具：

1. 设置保存时格式化：
   1. 方法一：设置/编辑器/更多编辑器设置/搜索format on save并开启。
   2. 方法二：打开setting.json：视图/命令面板（Ctrl+Shift+Alt+P）/搜索打开设置（json)/新增一行 `"editor.formatOnSave": true`（记得保存）
2. 选择格式化程序：
   1. 初次设置保存时格式化后，第一次保存格式化需要选择格式化程序。一律选择带“vscode”的格式化工具。
   2. 重新选择格式化程序，如果要重新选择格式化程序，打开setting.json（参考方法二），将选择的程序的配置删除，再次保存时重新选择。

## 组件库

主要使用小程序原生组件，一些表单组件如日期选择器等，使用Vant Weapp。

[小程序组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/)

[Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/#/home)（版本：1.10.11）

Vant使用方法：

在wxml中直接使用：

``` html
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
```

配置步骤（记录）

1. 新建终端（Ctrl+Shift+`)

   ``` json
   npm init -y
   npm i @vant/weapp -S --production
   ```

2. 配置文件

   1. 将 app.json 中的 `"style": "v2"` 去除。


         2. 在 app.json 中全局引入vant组件。


   ``` json
     "usingComponents": {
       "van-button": "@vant/weapp/button/index"
     },
   ```

​		3. 修改project.config.json中setting数组的配置

   ``` json
 "packNpmManually": true,
 "packNpmRelationList": [
   {
     "packageJsonPath": "./package.json",
     "miniprogramNpmDistDir": "./"
   }
 ],
   ```

3. 构建npm：工具>构建npm



``` js
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
```