Table of contents
1. The login of the applet - wx.login/getUserProfile
3. Scan code of applets and APPs——uni.scanCode(OBJECT)
4. Carousel map indicator point: ——uni-swiper-dot
Six, page scrolling - uni.pageScrollTo(OBJECT)
7. Poster panel——painter (plug-in)
8. Background music - uni.createInnerAudioContext()
1. The login of the applet - wx.login/getUserProfile
Silent login, manual authorization login
1) , silent login
1. wx.login==> get code, getUserProfile get iv and other information
2. The two obtained messages are used to adjust the interface to obtain the token
2) All users use authorization
....
2. Small program to achieve sharing - onShareAppMessage
1. You can share it through the sharing that comes with the applet
2. You can share through the button event
3. Write onShareAppMessage(OBJECT) [same level as onLoad and other life cycle functions]
Share | uni-app official website
3. Scan code of applets and APPs——uni.scanCode(OBJECT)
Call up the code scanning interface of the client, and return the corresponding result after the code scanning is successful.
uni.scanCode(OBJECT) | uni-app official website
4. Carousel map indicator point: ——uni-swiper-dot
Wrap the uni-swiper-dot component outside the swiper component to adjust the position and style of the indicator point
Five, small point
1. The css window-top in uniapp, the gap between H5 and applet, the distance from the top
2. The data request is garbled, so solve it:
Write the data detail.content in it
3. The logic of browsing records:
Check whether the current id exists in the previous cache
If there is, delete the previous one, and put the current id at the front of the array
Six, page scrolling - uni.pageScrollTo(OBJECT)
7. Poster panel——painter (plug-in)
Generate images when sharing
Poster Artboard- DCloud Plugin Market
<l-painter :board="jsonSchema" ref="painter"/>
this.jsonSchema={
css: {
// 根节点若无尺寸，自动获取父级节点
width: '750rpx'
},
views: [
{
type: 'text',
text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
css: {
color:'white',
// 设置居中对齐
textAlign: 'center',
// 设置中划线
textDecoration: 'line-through'
}
},
{
css: {
// background: "#ff9d00",
height: "120rpx",
width: "120rpx",
// borderRadius: "50%",
display: "block"
},
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
},
]
}
// 渲染
this.$refs.painter.render(this.jsonSchema);
// 生成图片
this.$refs.painter.canvasToTempFilePathSync({
fileType: "jpg",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
console.log(res.tempFilePath);
// 非H5 保存到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
console.log('save success');
}
});
},
});
8. Background music - uni.createInnerAudioContext()
uni.createInnerAudioContext() | uni-app official website
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
this.innerAudioContext.destroy() // 销毁音频
9. Modification of navigation
Turn off the native navigation bar
Then use uview or uniapp components (the advantage of components is that when changing the background color of the navigation bar, all the colors at the top of the phone will change)
