微信/支付宝小程序开发之路

一、微信小程序

1、开发之前

使用的工具：微信开发者工具 + VSCode
开发的时候并没有给上线时真正的appkey，是使用自己注册的的appkey（好像也可以用测试账号）进行开发。
小程序注册流程就不记录了。（以下只针对个人当前这个小程序）

2、开发中的问题

2.1、代码差异(与html的区别)

常用标签

• text

文字都要写在标签中

• view

//hover-class   指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
//hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
//就个人而言：以上两个属性都没有使用过  还是按正常HTML、css样式来写的，
//具体见 https://developers.weixin.qq.com/miniprogram/dev/component/view.html

• image

//mode属性有很多  自己理解： aspectFit相当于contain ，aspectFill相当于cover
//lazy-load  图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
//第一个项目 只是用了这两个属性

• cover-view

//可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher
//只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

注意：
之前想要实现一个在直播中的视频图层上显示评论列表，评论列表是要有滚动条的，最新评论显示在最下方，保证滚动条一直滚到最下方，我这边使用的是，然后设置了scroll-top属性，文档中描述说的是“设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效”，但是我这边设置一直没有成功，后面又将换成了,在标签中嵌套了

• scroll-view

//可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
//属性值有很多，具体见文档

• cover-image

• swiper + swiper-item

• live-player

2.2、图标

小程序中有一些自带的图标
写法如下：

 
// type 是控制不同的图片，size 是图标大小，color 是图标颜色
//icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
//详情看文档

3、上传体验版

上传之后

• 1、在【开发】-【开发设置】-【服务器域名】中配置在小程序中用到的所有域名（注意：一个月内可申请5次修改）

• 2、若是直播的小程序需要在【开发】-【开发设置】-【接口设置】打开下图两个功能

  
  
  image.png

4、感受过的坑

标签：自身有个white-space: nowrap属性
1、当在使用这个标签并想实现文字两行省略号显示的时候，文字怎么都不换行，最后在发现自身属性的问题，后面将white-space设为normal
对于本来是不知道也不想使用的，但是同事说，单纯的定位可能后期会有问题，最好是用一下。但是在当前这个项目中，没有过多的使用这个标签，基本还是通过定位来实现。

二、支付宝小程序

1、开发之前

1.1、使用的工具： IDE + VSCode
下载IDE
注意：IDE请去官网下载最新版，不然有的在运行的时候 会有一些莫名的报错
1.2、开通支付宝小程序的后台
1.3、安装HerbJS

HerbJS文档地址
a.安装herbjs： npm install herbjs -g
b.初始化项目： herb init

image.png

以上命令若是不能正常执行，请加sudo

2、开发运行

在VSCode 打开项目文件夹 使用【npm install; npm run dev】运行代码 && IDE打开项目文件夹预览效果，二者均可编写代码

3、开发中的问题

4、总结

• 4.1 支付宝小程序排序组件（基于herbjs+pinyin-pro）

image.png

//index.axml

  
    
      
        {{item}}
      
        
          {{item}}
          {{name}}
        
      
    
    
      
        {{item}}
      
    
  

//index.js
import { Component } from 'herbjs';
import { pinyin } from 'pinyin-pro';
interface IComponentData {}

interface IComponentProps {
  dataList: {
    name: string;
  }[];
  onClick?: (e) => void;
}

interface IComponentMethods {
  getItem(event: any): void;
  onScroll(event: any): void;
  onClick(event: any): void;
}
function getRectAll(selector) {
  return new Promise(function(resolve) {
    my.createSelectorQuery()
      .selectAll(selector)
      .boundingClientRect()
      .exec(function(rect) {
        if (rect === void 0) {
          rect = [];
        }
        return resolve(rect[0]);
      });
  });
}
function debounceHandle(fn) {
  let timer = null;
  return function(...args) {
    // @ts-ignore
    const that = this;
    clearTimeout(timer); // 如果存在事件就清除定时器
    // @ts-ignore
    const arg = args;
    timer = setTimeout(function() {
      // 如果不存在那么就开启定时器
      fn.apply(that, arg);
    }, 200);
  };
}
Component({
  data: {
    indexList: [],
    mapObj: {},
    curKey: '',
    heightList: [],
    newKey: '',
    flag: 0,
  },
  props: {
    dataList: [],
    // onClick: () => {},
  },
  didUpdate(prevProps) {
  //父组件传过来的数组
    if (prevProps.dataList === this.props.dataList) return;
    const py = /^[A-Z]$/;
    //mapObj为左侧需要渲染的列表数据{A: [],B: []}
    const mapObj = this.props.dataList.reduce((pre, cur) => {
      const eng = pinyin(cur.name, {
        pattern: 'first',
        toneType: 'none',
        type: 'array',
      })[0].toUpperCase();
      const key = py.test(eng) ? eng : '#';
      return {
        ...pre,
        [key]: (pre[key] || []).concat([ cur.name ]).sort(),
      };
    }, {});
    //indexList为右侧需要渲染的 A-Z 首字母列表
    const indexList = Object.keys(mapObj).sort();
    if (indexList[0] === '#') {
      indexList.push(indexList.shift());
    }
    getRectAll('.code').then((res: any) => {
      this.setData({
        heightList: res,
      });
    });
    this.setData({
      indexList,
      mapObj,
      curKey: indexList[0],
    });
  },
  methods: {
    getItem(e) {
      this.setData({
        curKey: e.target.dataset.item,
        newKey: '',
      });
    },
    onScroll: debounceHandle(function(e) {
      const scrollTop = e.detail.scrollTop;
      // @ts-ignore
      const index = this.data.heightList.findIndex((cur, index, arr) => {
        return scrollTop >= arr[index].top && scrollTop <= arr[index + 1].top;
      });
      // @ts-ignore
      const key = this.data.indexList[index];
      // @ts-ignore
      this.setData({
        newKey: key,
        curKey: '',
      });
    }),
    onClick(e) {
      this.props.onClick && this.props.onClick(e.target.dataset);
    },
  },
});

//index.less
/*
.alphabeticSort {
  .code {
    padding: 24rpx;
  }
  .list {
    background-color: #fff;
    .listItem {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 24rpx;
      .left {
        background-color: #ccc;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        text-align: center;
        line-height: 80rpx;
        font-size: 48rpx;
        font-weight: 400;
        color: #fff;
        margin-right: 24rpx;
      }
      .right {
        color: #333;
      }
    }
  }
  .alphabeticList {
    position: fixed;
    right: 40rpx;
    top: 50%;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 15rpx;
    color: #333;
    transform: translateY(-50%);
    font-size: 28rpx;
    box-shadow: #ccc 0rpx 0rpx 20rpx;
    .active {
      color: #1677ff;
    }
  }
}
*/