小程序项目

Posted 2020-12-15 sheun

接口文档：https://www.showdoc.cc/128719739414963?page_id=2516997897914014

一，小程序的第三方框架

　　1. 腾讯 wepy          类似vue

　　2. 美团 mpvue        类似vue

　　3. 京东 taro             类似react

　　4. 滴滴 chaneleon

　　5. uni-app                类似vue

　　6. 原生框架 MINA （本次项目使用）

二，用到的文档

　　1. 小程序开发文档

　　2. mdn

　　3. 阿里巴巴矢量图标库

三，项目搭建

　　3.1 唯一的 appid

　　3.2 搭建目录结构（根目录下建）

 

 四，使用iconfont字体图标

　　大多数情况下，公司开发是内网环境，直接项目中直接引入生成的阿里图标外网链接是不可能行的

　　4.1 选择需要的图标假如购物车，将选择好的图标下载代码，解压改名为iconfont，拖进项目的文件夹内

　　4.2 原来的iconfont.css文件需改名为iconfont.wxss，因为小程序不识别.css结尾的文件，然后全局app.wxss引入文件就可以用了

　　（优点，解决了外网不可访问的问题，缺点，多人开发的时候比较麻烦）

　　

　　

 五，wxss及其变量的使用

　　wxss不支持通配符 *，清空默认样式只能手动清空

page,view,text,swiper,swiper-item,image,navigator {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

page {
  --themeColor: #eb4450;    // 全局声明一个全局变量，为--themeColor
}

.content {

　　color: var(--themeColor) // 使用这个全局样式

 }

 六，wx.request请求的简易封装

　　导入的时候路径要加后缀

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

export const request = (params) => {
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

import {

request

} from "../../request/reuqest.js";        /* 导入的时候路径要加后缀 */

 七，scroll-view 

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

　　小程序提供了滚动组件

八，微信存储  wx.setStorageSync 

https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

　　

 

 九，解决类似vue中dom复用的问题

　　例如这个点击左侧的分类，右侧的会变化，右侧的往下滑，然后在点击左侧的分类，右侧滚动的高度还是在原来的位置

　　scroll-view标签上有个属性 设置竖向滚动条位置  https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

　　让它绑定一个变量，然后每次点击的时候重新给变量赋值为0，就行了

十，高度撑满剩余的全部

// 加入一直头部的高度为80rpx，剩余的高度就是calc(100vh - 80rpx);，不要算出来写死，会有一点小差距
height: calc(100vh - 80rpx);

十一，使用es7中的语法 

　　小程序本身是不支持async/await语法的，但有些应用场景，我们使用async/await会使得代码更简洁，也更易于维护，用过都知道是有多爽的。既然小程序不支持，那我们可以借助 fackbook 开源的 regenerator 来完成这一功能

　　https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js

import regeneratorRuntime from \'../../lib/runtime/runtime\' //导入es7

 十二，小程序路由传参

1. url后面直接跟参数就好了
<navigator url="../shoplist/shoplist?cid={{item1.cat_id}}">
2.
wx.navigateTo({
      url: `../shoplist/shoplist?cid=${cat_id}`
    })

// 获取参数

onLoad: function (options) {

// console.log(options) //通过路由传过来的参数

}

 十三，小程序中的上拉加载

　　小程序中分为两种上拉加载

　　　　1. 全屏的上拉加载，利用生命周期 onReachBottom()上拉触底， 会触发该事件函数，然后做加载下一页的业务逻辑，但是有的时候我们并不需要整个屏幕都下拉，除了头部的才下拉刷新，就会用到第二种方法

　　　　2. 局部下拉刷新，利用 scroll-view 标签，中的绑定事件 bindscrolltolower滚动到底部/右边时触发，在绑定的事件处理函数中做加载下一页的业务逻辑

业务逻辑
    1.一般后端会将总条数total返回，我们每次请求参数会有个每页请求多少条数据
    2.通过 Math.ceil(总条数 / 每页请求的条数)  //算出来一共多少页
    3.在触底的事件处理函数中，判断当前的页数是不是大于等于总页数，如果是，则提示已加载全部数据，否则让页数++，发送请求，最后将原本的数据和请求过来的数据合并就好了

　　　　3. 小程序中自带了轻提示功能，wx.showToast()

 十四，小程序中的下拉刷新

　　　　和上拉加载一样，分为两种

　　　　1. 全局下拉刷新，首先开启下拉刷新功能，"enablePullDownRefresh": true，利用生命周期 onPullDownRefresh监听用户下拉动作，下拉的时候做一些异步请求的业务逻辑

　　　　　因为请求是异步的，使用async和await，最后利用小程序自带了方法，wx.stopPullDownRefresh() // 关闭下拉刷新的窗口

// 下拉刷新
  async onPullDownRefresh() {
    this.setData({
      swiperList: [],
      catesList: [],
      floorList: []
    })
    await this.getSwiperList();
    await this.getcateLise();
    await this.getfloorList();
    wx.stopPullDownRefresh()   // 关闭下拉刷新的窗口
  }

　　　　2. 局部下拉刷新

十四，小程序中选中dom元素   wx.createSelectorQuery()

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

十五，小程序中的弹框（轻提示，模态框，loading等）

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

　　　　封装请求带loading，例如一个页面可能有多个异步请求，不能只是第一个请求成功就隐藏掉loading，

　　　　应该声明一个变量，在每个请求调用的时候 ++，成功的时候 --，最后判断 0的时候隐藏

// 同时发送异步请求的次数
let ajaxTimes = 0;
export const request = (params) => {

  ajaxTimes ++;
  // 加载图标
  wx.showLoading({
    title: \'加载中\',
    mask: true
  });
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      header: header,
      success: (result) => {
        resolve(result.data.message);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
　　　　// complete是wx.request的，
        ajaxTimes --;
        if(ajaxTimes === 0) {
          wx.hideLoading();
        }
      }
    })
  })
}

 十六，回参的优化 和 图片格式的兼容性问题

　　1. 例如一个接口返回了好多字段，但是实际上页面渲染的时候只用到了几个，其余的用不到，这样会浪费小程序的性能，只要在给data中数据赋值的时候，只赋值需要的字段即可

　　2. 小程序中苹果手机对 .webp的图片格式兼容性不好，可能会渲染不出来，最好后端去更改图片格式，前端的话全局替换成.jpg就好了，不推荐这么做。

十七，wx.previewImage（预览大图功能）

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html 

十八，数组的map方法

　　　　1.同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。

与forEach不同，map有返回值，是一个数组，有些时候比forEach好用
const imageurllist = this.data.previewImage.map(item => item.pics_big)

等同于
const imageurllist = this.data.previewImage.map(function(item) {
  return item.pics_big
})

 十九，跳tabbar页面（其实小程序有两种跳转方式）

　　这种点击购物车，就是跳转到购物车界面，也就是tabbar界面

　　1. 直接navigator，指定open-type类型就好了

　　2.利用api跳转方式，wx.switchTab({})，见链接

　　（https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html）

 

navigator

 

20，button的能力

　　小程序基础随笔有说到，利用button的客服功能，分享功能

21，获取收货地址 （考虑用户授权） 

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.html

wx.getSetting({
      withSubscriptions: true,
      success: (result) => {
        const flag = result.authSetting[\'scope.address\']
        console.log(flag)
        if(flag === true || flag === undefined) {
          wx.chooseAddress({
            success: (result1) => {
              console.log(result1)
            }
          })
        } else {
          wx.openSetting({
            withSubscriptions: true,
            success: (result2) => {
              console.log(result2)
              wx.chooseAddress({
                success: (result3) => {
                  console.log(result3)
                }
              })
            }
          })
        }
      },
      fail: (res) => {},
      complete: (res) => {},
    })

 22, confim提示框

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

23，数组的filter方法

 　　filter方法同map方法，返回数组，当数组的某一项为true则返回

const arr = [{name: "tian",flag: true},{name: "shun",flag: true},{name: "ming",flag:false}]
const arrfilter = arr.filter(item => item.flag)  // [{name: "tian",flag: true},{name: "shun",flag: true}]

24, 微信支付（wx.requestPayment(Object object)）

　　https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html

　　企业级账号，开发人员添加至白名单，制度权限

25，CSS3 filter(滤镜) 属性

　　https://www.runoob.com/cssref/css3-pr-filter.html

filter: blur(10rpx); //高斯模糊

26, 关于 onshow钩子函数 获取路由参数

　　获取当前页面栈  getCurrentPages()    不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

　　https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

 27，函数的防抖和节流

　　定时器

　　防抖，一般用在输入框，防止重复输入，重复发送

　　节流，一般用在移动端页面的上拉和下拉

this.TimeId = -1

clearTimeout(this.TimeId);

    this.TimeId = setTimeout(() => {
      this.qsearch(value);
    }, 1000);

28, 小程序选择手机相册（图片）的api，wx.chooseImage(Object object)

 

29, 发布和上线

　　上线编译的代码不应超过2m，不校验合法域名，勾掉，   appid 会看到上传按钮