一、微信小程序
1、开发之前
使用的工具：微信开发者工具 + VSCode
开发的时候并没有给上线时真正的appkey，是使用自己注册的的appkey（好像也可以用测试账号）进行开发。
小程序注册流程就不记录了。（以下只针对个人当前这个小程序）
2、开发中的问题
2.1、代码差异(与html的区别)
常用标签
- text
文字都要写在
标签中
- view
- image
- cover-view
注意：
之前想要实现一个在直播中的视频图层上显示评论列表，评论列表是要有滚动条的，最新评论显示在最下方，保证滚动条一直滚到最下方，我这边使用的是
- scroll-view
- cover-image
- swiper + swiper-item
- live-player
2.2、图标
小程序中有一些自带的图标
写法如下：
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;
}
}
}
*/