# 原生微信小程序

**Repository Path**: javafdx/native-wechat-applet

## Basic Information

- **Project Name**: 原生微信小程序
- **Description**: 原生微信小程序-项目（云音乐）
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-26
- **Last Updated**: 2022-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

### 微信公众平台注册（获取 appid）

个人开发者--免费
企业开发者-- 300 一年
不同：主要（没有微信支付功能）没有附近推广

### weixin 小程序插件

1. wxml Language Service
2. 小程序开发助手
3. wechat-snippet

### 创建项目

1. 填写项目名称
2. 项目路径
3. appID (公众平台后台--开发--开发管理-开发设置)

#### setData 双向绑定

```
<!-- index.wxml -->
<!-- 1. 渲染一个内容 -->
<view class="title">{{message}}</view>
<!-- 2. 渲染列表 -->
<block wx:for="{{movies}}" wx:key="index">
  <view>{{item}}</view>
</block>
<!-- 3. 计数器的案例 -->
<view>当前计数器：{{counter}}</view>
<button size="mini" bind:tap="handleIncrement">+1</button>
<button size="mini" bind:tap="handleDecrement">-1</button>
--------------------------------------
// index.js
// 获取应用实例
Page({
  data: {
    message: "你好啊，李银河",
    movies: [
      "大话西游",
      "星际穿越",
      "不良热"
    ],
    counter: 0
  },

  changeMessage: function () {
    // 不能动态
    // this.data.message = "hello world"
    // 类似react this.setState()
    this.setData({ message: "hello world" })
  },
  handleIncrement: function () {
    this.setData({ counter: this.data.counter + 1 })
  },
  handleDecrement: function () {
    this.setData({ counter: this.data.counter - 1 })
  }
})

------------------------------------
/**index.wxss**/
.title {
  color: red;
  font-size: 40rpx;
}
```

知识点：
setData是同步还是异步的
1. 在设置data数据上，是同步的
2. 通过最新的数据对wxml进行渲染，渲染的过程是异步的
#### 用 vscode 打开项目

1. 不安装插件（wxml）不高亮


#### 使用框架-生成tabBar(app.json)


#### 请求服务地址问题
 http://123.207.32.32:9001 不在以下 request 合法域名列表中
 1. 添加ip (后台添加)正式上线时环境
 2. 测试环境适用
 详情--本地配置--不校验域名

 #### 封装请求函数
 service--index.js

 #### 封装类似vue2中的filter过滤函数
 utils--format.wxs(不支持es6语法)
 ``` 
 // commonjs es5导出--不支持es6
module.exports = {
  formatCount: formatCount
}
------------------
导入使用
<wxs src="../../utils/format.wxs" module="format"></wxs>
<view class="count">{{format.formatCount(item.playCount)}}</view>
 ```


#### 新建组件Component

1. 注册
index.json
```
{
  "usingComponents": {
    "video-item-v1": "/components/video-item-v1/index"
  }
}
```
注意：子组件接受参数的默认值是value: {}
```
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },
```
#### 配置下拉刷新
index.json
```
{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
}
```

#### 安装ui库vant
1. 终端--> npm init -y
2. npm install @vant/weapp
3. 详情---勾选--使用npm模块
4. 工具--构建npm(会生成miniprogram_npm文件)
5. 在相应页面进行组件注册
```
{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index"
  }
}
```

#### 组件样式覆盖
```
.van-search__content {
  background-color: #fff !important;
}
```

#### 组件的插槽实现
1. 默认插槽和自定义插槽的解决方案：
```
.header .slot:empty + .default {
  display: flex;
}
```

.header .slot:empty  子节点是否为空
.header .slot:empty + .default  如果为空，就改变default节点

2. 多个插槽（需要设置定义）
  options: {
    multipleSlots: true
  }



#### 多页面共享数据和事件（跨页面的通信）
1. 要必须是响应式的
app.js--globalData()是做不到这一点的


2. 安装使用
安装
npm install hy-event-store
```
const { HYEventStore } = require("hy-event-store")
const axios = require("axios")

// 创建Store对象
const store = new HYEventStore({
  state: {
    // 本地数据
    name: "why",
    age" 18,
    
    // 网络数据
    banners: [],
    recommends: []
  },
  actions: {
    // ctx 上下文    payload参数
    getHomeDataAction(ctx, payload) {
      // 发送网络请求
      axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
        ctx.banners = res.data.data.banner
        ctx.recommends = res.data.data.recommend
      })
    }
  }
}) 

// app启动--调用actions共享事件
store.dispatch("getHomeDataAction", 123)

// page1页面--获取并监听
store.onState("name", (res) => {
  console.log(res)
})

// page2页面--改变赋值
setTimeout(() => {
  store.setState("name", "kobe")
}, 1000)

// 第一次会获取数据--也会监听改变
store.onState("banners", (res) => {
  console.log(res)
})

```
注意：
 每次安装依赖
 都要重新构建一下


#### 获取机型信息（屏幕宽高）
app.js
1. 存放到全局变量globalData
2. 获取
const app = getApp()
  data: {
    screenWidth: app.globalData.screenWidth
  },

3. 或者直接获取（组件）
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight
  }

#### 子组件事件--父组件监听
子组件：
 this.triggerEvent("click"，参数)
父组件：
```
<area-header title="推荐歌曲"
  bind:click="handleMoreClick"
>
</area-header>
```
#### dom元素--事件传递参数
data-index="{{index}}"
data-自定义="{{index/item}}"都可以
取值--事件（event）
{
  dataset: {
    自定义： ''
  }
}
event.currentTarget.dataset


#### 自定义导航栏（不使用默认的微信导航）
在对应页面的index.json中配置
{
  "navigationStyle": "custom"
}

#### 组件的生命周期
lifetimes: {
  ready: function() {
    
  }
}