# 小程序

**Repository Path**: thinkerwing/applet

## Basic Information

- **Project Name**: 小程序
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-15
- **Last Updated**: 2022-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目结构
1. pages 用来存放所有小程序的页面
2. utils 工具类（如格式化时间的自定义模块）
3. app.js 小程序项目的入口文件
4. app.json 小程序项目全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

# 页面组成部分
1. js 页面脚本文件，存放页面的数据，事件处理函数
2. json 当前页面的配置文件，配置窗口的外观/表现等
3. wxml 页面的模版结构文件
4. wxss 当前页面的样式表文件

# json配置文件
![在这里插入图片描述](./img/json.png)
# project.config.json 是项目配置文件
setting 还总给你保存了编译相关的配置
appid 保存的是小程序账号id ， 导入外部项目记得更改这个
# sitemap
类似pc seo 允许微信索引

# 新建页面
在app.json => pages 新增页面的存放路径,自动创建

# wxss css 区别
![在这里插入图片描述](./img/wxss.png)

# 常用组件
 手机号支持长按选中效果
 ```
   <text selectable>13800005056</text>
 ```
如果后端返回html标签 通过这个直接渲染到页面
```
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>
```
# API
![在这里插入图片描述](./img/api.png)

# 事件传参
```
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
```
以data-* 自定义属性传参，其中*代表的是参数的名字

通过e.target.dataset.info 拿到传的参数

# bindinput
```
<input value="{{msg}}" bindinput="inputHandler"></input>

  // input 输入框的事件处理函数
  inputHandler(e) {
    console.log(e.detail.value)
    this.setData({
      msg: e.detail.value
    })
  },
```

# <block>
如果需要一次性控制多个组件的展示与隐藏可以使用< block >  ，并在上面 wx：if
注意：block并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何渲染

# rpx
将屏幕总宽度分成750份
官方建议： 可以以iphone6为视觉稿的标准 1rpx = 0.5px


# 全局配置文件及常用的配置项
app.json 是小程序的全局配置文件 常用的配置项如下
1. pages 记录小程序所有页面的存放路径
2. window 全局设置小程序窗口的外观
3. tabBar 设置小程序底部的tabBar
4. style 是否启用新版的组件样式
![在这里插入图片描述](./img/window.png)

![在这里插入图片描述](./img/window2.png)
6. 下拉刷新
```
 "enablePullDownRefresh": "true"
```
tabBar
![在这里插入图片描述](./img/tabBar.png)

# 声明式导航
![在这里插入图片描述](./img/navgator.jpg)
1. url地址必须以/开头
2. tabbar里面必须设置open-type
3. 后退导航
```
<navigator open-type="navigateBack" delta="1"> 后退
delta 默认为1
```
4. switchTab
![在这里插入图片描述](./img/switch.png)
```
  gotomsg() {
    wx.switchTab({
      url:'/pages/message/message'
    })
  },
  gotoinfo() {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

  <navigator open-type="navigateBack">back</navigator>
  <button bindtap="goback">back</button>

  goback() {
  wx.navigateBack({
    delta: 1
  })
 },
```
# 导航传参
![在这里插入图片描述](./img/nav2.png)
```
<navigator url="/pages/info/info?name=zs&age=20">跳转</navigator
勾选页面参数
```
通过声名/编程 导航传参  可以直接在onload事件中获取到
# 本地初始化的项目 与 github 版本不一致, 导致无法提交
```
cnblogs.com/pansidong/p/8287937.html
本地初始化的项目 与 github 版本不一致, 导致无法提交
 
$ git pull origin master
来自 https://github.com/itaken/python-login-demo
 * branch            master     -> FETCH_HEAD
fatal: 拒绝合并无关的历史
解决方法
 
在pull 时候, 添加–allow-unrelated-histories参数 即可.
 
$ git pull origin master --allow-unrelated-histories                   
来自 https://github.com/itaken/python-login-demo
 * branch            master     -> FETCH_HEAD
Merge made by the 'recursive' strategy.
 LICENSE | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LICENSE
  ```
# 自定义编译模式
可以设置重新编译的页面，方便开发

# 生命周期 （可以点击帮助->查看文档）
```
 生命周期函数--监听页面加载 ,  一个页面只调用一次
 
  onLoad: function (options) {
    console.log(options);
    this.getColor()
    this.setData({
      query: options
    })
  },
```
onShow()  监听页面显示
页面显示/切入前台时触发。

onReady()  监听页面初始渲染，一个页面调用一次
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期

onHide() 监听页面隐藏
页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload() 监听页面卸载 一个页面只调用一次
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

# 组件和页面的区别
![在这里插入图片描述](./img/component.png)
1. styleIsolation: 'isolated' 

```
styleIsolation: 'isolated' 
      // 默认值 isolated(启动隔离)、 
      // apply-shared(页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面) 、
      // shared(wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件)、
```
# prop
![在这里插入图片描述](./img/prop.png)
```
properties: {
    // 第一种方式：简化的方式
    // max: Number
    // 第二种方式：完整的定义方式
    max: {
      type: Number,
      value: 10
    }
  },
```
![在这里插入图片描述](./img/prop2.png)
![在这里插入图片描述](./img/prop3.png)
# observes
![在这里插入图片描述](./img/observers.png)

# 纯数据字段
概念： 纯数据字段指的是不用于界面渲染的data字段

应用场景： 某些data中的字段既不会显示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用

好处： 纯数据字段有助于提升页面更新的性能
# 组件生命周期
![在这里插入图片描述](./img/com1.png)
![在这里插入图片描述](./img/com2.png)
# lifetimes 节点
![在这里插入图片描述](./img/com3.png)
# 什么是组件所在页面的生命周期
有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在的页面的生命周期
![在这里插入图片描述](./img/com4.png)
pageLifetimes节点
![在这里插入图片描述](./img/com5.png)
# 事件绑定
![在这里插入图片描述](./img/emit.png)
![在这里插入图片描述](./img/emit2.png)
```
 // 触发自定义事件，将数值同步给父组件
      this.triggerEvent('sync', { value: this.properties.count })
```
父组件
```
// js文件中
  syncCount(e) {
    console.log('syncCount');
    console.log(e.detail.value);
    this.setData({
      count: e.detail.value
    })
  },
  //wxml
  <my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
```
![在这里插入图片描述](./img/emit3.png)

# behaviors
小程序中，用户实现组件件代码共享的特性，类似于vue的mixins

每个behavior 可以包含一组属性/数据/生命周期函数/方法，组件引用它时，他的属性/数据和方法会被合并到组件中