# wxApp

**Repository Path**: josnfei/wxApp

## Basic Information

- **Project Name**: wxApp
- **Description**: 微信小程序
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## flex布局

```css
.container{
    display: flex; /*开启flex布局*/
    flex-direction:column; /*垂直排列  column-reverse,垂直的相反方向 row也如此*/
    align-items: center; /*居中*/
    background-color:#b3d4db;
}
/* 如果container里面有一个view，view里面需要水平排列，则给view设置flex-direction:row 即可*/
```

## 微信小程序配置文件

```javascript
{
  "pages":[
    "pages/welcome/welcome"  //路径配置，相当于vue的路由
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db" //顶部导航颜色
  }
}
```

## 微信组件

### text 特性

1. 支持嵌套
2. 支持转移  比如 /n  会编译成换行
3. 手机支持长按选中文字

## 小程序其他

. 常用单位 rpx
. 缓存 微信最大支持10M
. 编译包在1M左右，否则上传不了
. this.setData()  会将里面的值，放在data对象中,一般在onload声明周期执行

## 其他页面顶部单独处理

> 对应文件夹下创建xxx.json 文件
> 配置的只是window ，所以里面也无需再写window这个键，直接写

## 页面之间的跳转 

```javascript
  // 父子级跳转，子级左上角有返回箭头
    //  wx.navigateTo({
    //    url: '../posts/post',
    //    success: function(res) {}, //成功后执行
    //    fail: function(res) {}, //失败执行
    //    complete: function(res) {},//无论失败或者成功都执行
    //  });

    // 平级跳转，左上角没有返回箭头
     wx.redirectTo({
       url: '../posts/post',
       success: function(res) {},
       fail: function(res) {},
       complete: function(res) {},
     })
```

## 事件绑定

```html
  tap事件相当于 click事件
  事件绑定，都是要bindtap这种写法，或者catchtap，其他事件也是如此

  bindtap和catchtap区别

  bindtap： 事件冒泡过程，比如子和父都绑定了click事件，点击子，同时会触发父的click事件
  catchtap：  阻止事件冒泡，也就是不会有上面的情况发生
```

## template 使用

1. 模板文件导入`<import src='post-item/post-item-template' />` 相对路径
2. 模板文件样式导入 `@import 'post-item/post-item-template.wxss';` 
3. 使用`<template is='itemList' data="{{item}}"/>` is对应模板的template的name, 如果是循环，同时需要把数据给过去
4. 模板文件不支持写对应的JS，JS只能写在父里面
5. 总结，微信实际是模板化开发，而不是模块化开发，真正的模块化开发，也可以对应模板的JS


## JS公用可以抽离出来
1. require的方式，暴露文件出去,`module.exports={}`
2. 引入`var postsData = require('../../data/posts-data.js'); //只能使用相对路径`

## 解决模板列表渲染去除item

```javascript
  //模板里面，可以直接写对象对应的键，无需再加item

  //
  <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <!--或者直接用view包住template，在view加事件和自定义属性  -->
    <template is='itemList' data="{{...item}}"/>
    <!--拓展运算符，相当于把这个对象item全部展开-->
  </block>
```

## 如何知道列表点击的是哪个（跨页面传值）

```javascript
  //设置值
    <view class="post-container" catchtap='onPostDer' data-postId="{{postId}}">
  //js取值
  // 点击某个新闻列表
  onPostDer:function(e){
    var postId = e.currentTarget.dataset.postid;  //取值
    wx.navigateTo({
      url: './post-derst/post-derst',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

```

## 涉及到页面跳转，都需要在app.json里面设置路径

```javascript
// 页面的跳转，都需要设置到对应的文件夹下面的文件名
//app.json
  "pages":[
      
      "pages/welcome/welcome",
      "pages/posts/post",
      "pages/posts/post-derst/post-derst"
    ],
//其他页面    
  wx.navigateTo({
      url: './post-derst/post-derst',  //对应文件夹下面的文件名
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
```

## 列表页面获取点击当前ID，及传值到内页的方式

```javascript
  //列表页面获取点击当前ID

  //设置值
    <view class="post-container" catchtap='onPostDer' data-postId="{{postId}}">
  //js取值
  // 点击某个新闻列表
  onPostDer:function(e){
    var postId = e.currentTarget.dataset.postid;  //取值
     wx.navigateTo({
      url: './post-derst/post-derst?postId=' + postId,  //列表传值到内页，通过url的方式传
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })


  //传值到内页的方式上面，通过URL的方式传值过去


  //内页取值的方式
  onLoad: function (options) {
    var postId = options.postId;// 列表通过URL传的值进来，在onLoad生命周期获取

```

## 微信缓存

```html
  // 微信缓存用法
  // wx.setStorageSync(key, data); //设置同步缓存
  // wx.getStorageSync(key);  //获取同步缓存
  // wx.removeStorageSync(key);  //删除同步缓存
  // wx.clearStorageSync();  //清空缓存
```

# 微信交互页面

## 微信提示框

```javascript
  // 提示框
  wx.showToast({
    title: tf[this.data.Pid]?'收藏成功':'取消收藏',
    icon: 'success',
    duration: 2000,
    mask:true
  })

  //如果需要强制关闭这个提示框
  setTimeout(function(){
    wx.hideToast()
  },2000)

  还有另外一个提示框
  wx.showLoading(OBJECT)
  显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框
```

## 微信模态框

```javascript
  wx.showModal({
      title: '收藏文章',
      content: tf[that.data.Pid] ? '收藏？' : '取消收藏？',
      success:(res)=>{
        if(res.confirm){//用户点击了确定按钮    res.cancel代表用户点击了取消按钮
          wx.setStorageSync('showHide', tf);
          that.setData({
            SH_model: tf[that.data.Pid]
          })
        }
      }
    });
```


## 微信下拉选择 wx.showActionSheet({})

```javascript
  // 点击分享按钮的时候
  onShareTap(event){
    var itemList=[
      '分享到朋友圈',
      '分享到QQ空间',
      '分享到好友',
      '分享到微博'
    ]
    wx.showActionSheet({
      itemList: itemList,
      success: function (res) {
        // console.log(res.tapIndex); //获取到的是点击的数组的索引
        wx.showModal({
          title: '分享',
          content: '用户点击了' + itemList[res.tapIndex],
          success:(res)=>{
            
          }
        })

      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  }
```

# 缓存同步和异步写法（根据业务使用同步或者异步）

```javascript
  //同步设置
  wx.setStorageSync('键',值);

  //异步设置
  wx.setStorage({
    key:'键',
    data:'值'
    success：function(res){
      //接口调用成功的回掉
    }
  })

```

# 音乐播放

```javascript
  //播放音乐总开关
  wx.playBackgroundAudio({
    dataUrl: '',  //必须第三方链接
    title: '',
    coverImgUrl: ''//必须第三方链接
  })

  //暂停音乐
  wx.pauseBackgroundAudio();//暂停音乐

  //监听音乐播放
  wx.onBackgroundAudioPlay(CALLBACK)

  //监听音乐停止
  wx.onBackgroundAudioPause(CALLBACK)
```


# 打断点调试

1. 需要在ctrl+p 搜对应的文件，在sm文件打断点，这个是源文件

# APP.js文件的作用

1. 提供全局变量，（音乐播放，退出页面，再进去，图片显示正常，就是因为该页面又初始化了，但是音乐还在播放，所以需要一个全局变量）
2. 获取方式  在其他页面var app=getApp() 方式获取

# 清除缓存

1. 真机调试，有时候上一次错误的缓存，导致真机调试出问题，需要清除之前的缓存
2. 在页面上加一个按钮，这个按钮就是调用清除所有的缓存的方法

```javascript

```

# wxml图片地址推荐使用/绝对路径的方式

# 增加tarbar功能

```javascript
  1. 在app.json文件中添加
  2. 首页点击的时候，不能再用redirectTo,而需要用switchTab跳转

```

# 微信的icon的使用

```javascript
  <icon type="success" size="40" color="#000"/>
  备注： type: 类型
        size：图标大小
        color: 图标颜色
```

# 微信的input的使用

```javascript
  <input type="text" placeholder="血战钢锯岭、你的名字" 
  placeholder-class="placeholder" bindfocus="onBindFocus"
  bindblur="onBindBlur"/>
  
  备注：
    type:输入类型  text（文本输入键盘）   number（数字输入键盘）   idcard（身份证输入键盘）  digit（带小数点的数字键盘）
    placeholder：文字占位符
    placeholder-class：针对该input的css
    bindfocus: 输入框聚焦时触发
    bindblur： 输入框失去焦点时触发  console.log(e.detail.value); //失去焦点获取输入框的内容

  其他： 查看具体API https://developers.weixin.qq.com/miniprogram/dev/component/input.html  
```

# 微信的scroll-view的使用

```javascript
  <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
    <block wx:for="{{movies}}" wx:for-item="movie">
      <view class="single-view-container">
        <template is="movieTemplate" data="{{...movie}}" />
      </view>
    </block>
  </scroll-view>


  备注： 
    scroll-y="true" 允许竖向滚动
    scroll-x="false" 不允许横向滚动
    bindscrolltolower="onScrollLower"  滚动到底部/右边，会触发 scrolltolower 事件

  注意：
    使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。  
```

# 微信网络请求

```javascript
  // 封装HTTP请求
    function http(url,callback){
      wx.request({
        url: url,
        method:'GET',
        header:{
          "Content-Type": "json"
        },
        data:{
          //传值写在这里
        },
        success:function(res){
          callback(res.data);
        },
        fail:function(error){
          console.log(error);
        }
      })
    }

  备注：
     content-type 默认为 'application/json';
     url 中不能有端口

  注意：
    返回一个 requestTask 对象，通过 requestTask，可中断请求任务。
    requestTask.abort() // 取消请求任务

    2. 只有url是必填，其他都可以忽略
```

# 微信下拉刷新

```javascript

  在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。

  需要在 config 的window选项中开启 enablePullDownRefresh。
  当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  onPullDownRefresh(event){
    console.log(event,555);
    var refreshUrl = this.data.requestUrl +
      "?star=0&count=20";  //地址更改回来
    this.data.movies = []; //存储变量置空
    this.data.isEmpty = true;
    this.data.totalCount = 0;
    util.http(refreshUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },
```

# 微信加载动画开启和关闭

```javascript
  wx.showNavigationBarLoading();  //状态栏显示加载动画(用于加载数据触发)
  wx.hideNavigationBarLoading();  //关闭状态栏的加载动画(数据加载完关闭)
```

# 单独设置顶部名称，而不通过json文件的API

```javascript
  wx.setNavigationBarTitle({
    title: '当前页面'
  })
```

# 媒体，图片

```javascript
  1.wx.chooseImage(OBJECT)  从本地相册选择图片或使用相机拍照。

  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
    }
  })

  2. wx.previewImage(OBJECT)   预览图片。

  wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
  })

  3. wx.getImageInfo(OBJECT)  获取图片信息

  wx.getImageInfo({
    src: 'images/a.jpg',
    success: function (res) {
      console.log(res.width)
      console.log(res.height)
    }
  })

  wx.chooseImage({
    success: function (res) {
      wx.getImageInfo({
        src: res.tempFilePaths[0],
        success: function (res) {
          console.log(res.width)
          console.log(res.height)
        }
      })
    }
  })

  4. wx.saveImageToPhotosAlbum(OBJECT)  保存图片到系统相册。需要用户授权 scope.writePhotosAlbum

  wx.saveImageToPhotosAlbum({
      success(res) {
      }
  })

  注：api地址
    https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxsaveimagetophotosalbumobject
```

# 微信图片组件

```javascript
  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="top" src="{{src}}"></image>

  备注：
    mode:  mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
    地址: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

  注意，如果需要做模糊效果，则还需要配合css3
    -webkit-filter:blur(20px)
    地址：http://www.css88.com/book/css/webkit/visual/filter.htm  
```

# 点击X号，输入框删除本来输入的东西

```javascript
  <input type="text" value="{{inputValue}}" placeholder="请输入电影名称" 
  placeholder-class="placeholder" bindfocus="onBindFocus"
  bindblur="onBindBlur"/>


  data:{
    inputValue: '' ,一开始也为空
  }

  // 输入框点击X号触发
  onCancelImgTap(){
    this.setData({
      searchPanelShow: false,
      containerShow:true,
      searchResult:{},  //把列表数据清空
      inputValue:''
    })
  },
```