sannilake
/
miniprogram-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: demo整合

master
蒋雪 2021-12-30 10:55:50 +08:00
parent 3bdc8a24b3
commit 20b0683349
53 changed files with 4701 additions and 629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.js
View File

@ -1,6 +1,7 @@
//app.js
App({
onLaunch: function () {
onLaunch: function (opt) {
console.log('onLaunch: ', opt)
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())

13
app.json
View File

@ -32,8 +32,14 @@
"pages/component/movable/movable",
"pages/component/doc-web-view/doc-web-view",
"pages/component/page-meta/page-meta",
"pages/component/map/map",
"pages/component/multiple-map/multiple-map",
"pages/component/keyboard-accessory/keyboard-accessory",
"pages/component/camera/camera",
"pages/component/cover-view/cover-view"
"pages/component/cover-view/cover-view",
"pages/component/webrtc/webrtc",
"pages/component/page-container/page-container",
"pages/component/share-element/share-element"
],
"subpackages": [
{
@ -83,7 +89,10 @@
"pages/FileSystemManager/writefile",
"pages/EventChannel/firstpage/index",
"pages/EventChannel/secondpage/index",
"pages/Accelerometer/index"
"pages/Accelerometer/index",
"pages/getRandomValues/getRandomValues",
"pages/checkIsOpenAccessibility/index",
"pages/locationapi/index"
]
}
],

12
fide.project.config.json 100644
View File

@ -0,0 +1,12 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"useOldBuilder": false
},
"compileType": "miniprogram",
"projectname": "applet-demo",
"isGameTourist": false
}

BIN
image/duck.gif 100755
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

BIN
image/logo.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

623
packageAPI/pages/FileSystemManager/writefile.js
View File

@ -1,526 +1,167 @@
// pages/writefile/index.js
console.log('page 打印', wx.env.USER_DATA_PATH);
// const base64 = require('../../utils/data')
let fs = null
Page({
/**
* 页面的初始数据
*/
data: {
filePath: `${wx.env.USER_DATA_PATH}/d`,
// base64,
// 配置路径循环生成
paths: [
`finfile://usr/a.txt`,
`finfile://usr/b.txt`,
`finfile://usr/c.txt`,
`finfile://usr/test`,
`finfile://usr/1.zip`,
`finfile://usr/test/a.txt`,
`finfile://usr/test/b.txt`,
`finfile://usr/test/c.txt`,
`finfile://temp/c.txt`,
`finfile://temp/a/b/c`,
`finfile://store/c.txt`,
`http://usr/1.zip`,
`http://usr/aa`,
`http://usr/aa/ab.txt`,
`http://store/a.txt`,
`http://store/b.txt`,
`http://store/test`,
`wxfile://usr/aa`,
`wxfile://usr/aa/abc.txt`,
],
filePath: '',
data: "",
encoding: "utf-8",
source: "",
readencoding:"utf-8"
encoding: "",
recursive: null,
path1: '',
path2: '',
flag: '',
position: '',
offset:'',
entries:''
},
readFileFunc(path, encoding,position,length) {
console.log('readFile encoding:', encoding, '; path:', path);
const fs = wx.getFileSystemManager()
fs.readFile({
filePath: path,
encoding,
position,
length,
success(res) {
console.log('readFile success:', res)
},
fail(res) {
console.log('readFile fail:', res)
}
onLoad() {
this.setData({
filePath: `${wx.env.USER_DATA_PATH}`
})
fs = wx.getFileSystemManager()
},
readFileSyncFunc(path, encoding, position, length) {
console.log('readFileSync encoding:', encoding, '; path:', path);
const fs = wx.getFileSystemManager()
try {
const res = fs.readFileSync(path, encoding,position,length)
console.log('readFileSync res:', res)
} catch (e) {
console.log('readFileSync error:', e)
}
},
//同步
writeFileSync() {
const fs = wx.getFileSystemManager()
try {
const res = fs.writeFileSync(
/* `${wx.env.USER_DATA_PATH}/hello.mp3` */null, "", 'utf8'
)
console.log('writeFileSync:', res)
} catch (e) {
console.error('writeFileSync err:', e)
}
},
//异步文件测试
writeFile() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: this.data.filePath,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(this.data.filePath, this.data.encoding,1,3)
this.readFileFunc(this.data.filePath, this.data.encoding,2,4)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFileStartRange() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: this.data.filePath,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(this.data.filePath, this.data.encoding,3,1)
this.readFileFunc(this.data.filePath, this.data.encoding,3,1)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFileLength0() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: this.data.filePath,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(this.data.filePath, this.data.encoding,2,0)
this.readFileFunc(this.data.filePath, this.data.encoding,2,0)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFileLengthPoint() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: this.data.filePath,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(this.data.filePath, this.data.encoding,2,1.2)
this.readFileFunc(this.data.filePath, this.data.encoding,2,1.2)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFileReadnoEncoding() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
const path = `${wx.env.USER_DATA_PATH}/nc`
fs.writeFile({
filePath:path,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log('写文件路径：' ,path),
this.readFileSyncFunc(path)
this.readFileFunc(path)
},
fail(res) {
console.log('writeFile fail:', res)
// console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFilePermission() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
data: this.data.data,
filePath:`${wx.env.USER_DATA_PATH}/d`,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(this.data.filePath, this.data.encoding,1,3)
this.readFileFunc(this.data.filePath, this.data.encoding,2,4)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
writeFileNotFound() {
console.log("打印地址", this.data.filePath)
console.log("当前选中deta：",this.data.data)
const fs = wx.getFileSystemManager()
fs.writeFile({
data: this.data.data,
filePath:`${wx.env.USER_DATA_PATH}/d`,
encoding: this.data.encoding,
success: (res) => {
console.log('writeFile success:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
this.readFileSyncFunc(`${wx.env.USER_DATA_PATH}/dl`,this.data.encoding,1,3)
this.readFileFunc(`${wx.env.USER_DATA_PATH}/dl`, this.data.encoding,2,4)
},
fail(res) {
console.log('writeFile fail:', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
}
})
},
base64File() {
const path = `${wx.env.USER_DATA_PATH}/d`
wx.fileToBase64({
url: path,
success: (res) => {
console.log('fileToBase64 success: ', res)
console.log(res.data)
},
fail(res) {
console.log('fileToBase64 fail: ', res)
}
})
},
saveFile() {
wx.saveFile({
filePath: `${wx.env.USER_DATA_PATH}/d`,
success(res) {
console.log("保存成功", res)
},
fail(res) {
console.log("保存失败", res)
}
setParams(e) {
const { key } = e.currentTarget.dataset
this.setData({
[key]: e.detail.value
})
},
downFile() {
downZipSave(){
const fs=wx.getFileSystemManager()
wx.downloadFile({
url: `${wx.env.USER_DATA_PATH}/d`,
success(res) {
console.log("下载成功", res)
},
fail(res) {
console.log("下载失败", res)
}
})
},
//图片
writeImage() {
const fs = wx.getFileSystemManager()
const path = `${wx.env.USER_DATA_PATH}/a`
fs.writeFile({
filePath: path,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeImagSuccess', res)
console.log(path)
this.readFileSyncFunc(path, 'base64')
this.readFileFunc(path, 'base64')
},
fail(res) {
console.log('writeImageFail', res)
}
})
},
imagePreview() {
wx.previewImage({
urls: [`${wx.env.USER_DATA_PATH}/a`],
success(res) {
console.log("图片预览成功", res)
},
fail(res) {
console.log("图片预览失败", res)
}
})
},
imageCompress() {
wx.compressImage({
src: '`${wx.env.USER_DATA_PATH}/a`',
success(res) {
console.log("图片压缩成功", res)
},
fail(res) {
console.log("图片压缩失败", res)
}
})
},
imageSaveToPhotosAlbum() {
wx.saveImageToPhotosAlbum({
filePath: `${wx.env.USER_DATA_PATH}/a`,
success(res) {
console.log("图片保存到相册成功", res)
},
fail(res) {
console.log("图片保存到相册失败", res)
}
})
},
fileUpload() {
wx.uploadFile({
filePath: `${wx.env.USER_DATA_PATH}/a`,
name: 'file',
url: 'https://finchat-mop-b.finogeeks.club/api/v1/mop/finstore/dev/files?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MjUxOTQyMjgsImZjaWQiOiI1ZmYzZDhmZWU3YzNiNTAwMDExYWQxMmEiLCJpYXQiOjE2MjUxODcwMjgsImlzcyI6Ijc1NWUxNnFrNVZLUnBlcWhKM1IySVFwV2NOdlQ5TWJOIn0.IQXdjiH5One-GVsU9E5KTze0fXJ7InJE-BrmcQs9yIc',
success(res) {
console.log("文件上传成功", res)
},
fail(res) {
console.log("文件上传失败", res)
}
})
},
//视频
writeVideo() {
const fs = wx.getFileSystemManager()
const path = `${wx.env.USER_DATA_PATH}/b.mp4`
fs.writeFile({
filePath: path,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeVideo Success', res)
console.log(`${wx.env.USER_DATA_PATH}/b.mp4`)
this.readFileSyncFunc(path, 'base64')
this.readFileFunc(path, 'base64')
},
fail(res) {
console.log('writeFail', res)
}
})
},
videoSaveToPhotosAlbum() {
wx.saveVideoToPhotosAlbum({
filePath: `${wx.env.USER_DATA_PATH}/b.mp4`,
success(res) {
console.log("视频保存到相册成功", res)
},
fail(res) {
console.log("视频保存到相册失败", res)
}
})
},
mediaPreview() {
wx.previewMedia({
sources: [
{
"url": `${wx.env.USER_DATA_PATH}/b.mp4`,
"type": "video"
}
],
success(res) {
console.log("视频播放成功", res)
},
fail(res) {
console.log("视频播放失败", res)
}
})
},
videoPreview() {
wx.previewVideo({
url: `${wx.env.USER_DATA_PATH}/b.mp4`,
autoplay: true,
success(res) {
console.log('视频播放成功', res)
},
fail(res) {
console.log('播放失败', res)
}
})
},
//语音
writeAudio() {
const fs = wx.getFileSystemManager()
const path = `${wx.env.USER_DATA_PATH}/c.mp3`
fs.writeFile({
filePath: path,
data: this.data.data,
encoding: this.data.encoding,
success: (res) => {
console.log('writeAudio Success', res)
console.log(`${wx.env.USER_DATA_PATH}/c.mp3`)
this.readFileSyncFunc(path, 'base64',10,13)
this.readFileFunc(path, 'base64',20,15)
},
fail(res) {
console.log('writeFail', res)
}
})
},
innerAudioPlay() {
const ctx = wx.createInnerAudioContext()
ctx.src = `${wx.env.USER_DATA_PATH}/c.mp3`
/* ctx.seek(20) */
ctx.play()
ctx.onPlay(() => {
console.log('开始播放')
})
ctx.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
console.log(res)
})
},
voicePlay() {
wx.playVoice({
filePath: `${wx.env.USER_DATA_PATH}/c.mp3`,
success(res) {
console.log("播放成功", res)
},
fail(res) {
console.log("播放失败", res)
}
})
},
documentOpen() {
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/wd.doc`,
data: this.data.data,
encoding: this.data.encoding,
success(res) {
console.log('writeSuccess', res)
console.log(`${wx.env.USER_DATA_PATH}/wd.doc`)
wx.openDocument({
filePath: `${wx.env.USER_DATA_PATH}/wd.doc`,
success(res) {
console.log("文件打开成功", res)
url: 'https://app.finogeeks.com/finchat/sdk/FinApplet-dev-2.34.0-alpha20210826v06.zip',
success(res){
console.log("文件下载成功",res)
fs.saveFile({
tempFilePath: res.tempFilePath,
filePath: `${wx.env.USER_DATA_PATH}/1.zip`,
success(res){
console.log("zip保存成功",res)
},
fail(res) {
console.log("文件打开失败", res)
fail(res){
console.log("zip保存失败",res)
}
})
},
fail(res) {
console.log('writeFail', res)
}
})
},
invokeApi(e) {
console.log('点击了 button')
const { api, encoding, data, recursive, flag, length, entries, position, offset, arr = [], set, arrayBuffer, ...params } = e.currentTarget.dataset
if (api) {
// 将配置的参数转换为 data 参数
Object.keys(params).forEach(value => {
const key = params[value]
params[value] = this.data[key]
})
writeFileArrayBuffer() {
console.log("打印地址", this.data.filePath)
/* console.log("打印data",this.data.data) */
const fs = wx.getFileSystemManager()
fs.writeFile({
data: wx.base64ToArrayBuffer(this.data.data),
filePath: `${wx.env.USER_DATA_PATH}/d`,
encoding: this.data.encoding,
success(res) {
console.log('writeSuccess', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
},
fail(res) {
console.log('writeFail', res)
console.log(`${wx.env.USER_DATA_PATH}/d`)
// encoding 和 data 有配置就是 true，直接赋值
if (encoding !== undefined) {
params.encoding = this.data.encoding
}
if (entries !== undefined) {
params.entries = this.data.entries
}
if (length !== undefined) {
params.length = this.data.length
}
if (position !== undefined) {
params.position = this.data.position
}
if (data !== undefined) {
params.data = this.data.data
}
if (recursive !== undefined) {
params.recursive = this.data.recursive
}
if (flag !== undefined) {
params.flag = this.data.flag
}
if (arrayBuffer !== undefined) {
params.arrayBuffer = new ArrayBuffer(arrayBuffer)
}
if (api.endsWith('Sync') && arr && arr.length) {
let list = arr.split(',').map(key => this.data[key])
console.log('准备执行同步 api：', api, list)
fs[api].apply(this, list)
} else {
console.log('准备执行 api：', api, params)
const res = fs[api]({
...params,
success: (res) =>{
if (set && res[set]) {
this.setData({
[set]: res[set]
})
}
console.log('调用成功 success')
console.log(res)
},
fail (res) {
console.log('调用失败 fail')
console.log(res)
}
})
if (res) {
console.log('调用成功 success:', res)
}
if (set) {
this.setData({
[set]: res
})
}
}
})
},
bindchangepath(e) {
this.setData({
filePath: e.detail.value
})
},
bindchangeencoding(e) {
this.setData({
encoding: e.detail.value
})
},
bindchangedata(e) {
this.setData({
data: e.detail.value
})
},
}
}
})

3
packageAPI/pages/FileSystemManager/writefile.json
View File

@ -1,4 +1,3 @@
{
"usingComponents": {},
"disableScroll":false
"usingComponents": {}
}

474
packageAPI/pages/FileSystemManager/writefile.wxml
View File

File diff suppressed because one or more lines are too long

12
packageAPI/pages/FileSystemManager/writefile.wxss
View File

@ -1,8 +1,6 @@
/* pages/writefile/index.wxss */
.title {
padding: 10rpx 20rpx;
font-size: 30rpx;
font-weight: bold;
text-align: center;
/* pages/file-2/index.wxss */
.box {
display: flex;
flex-wrap: wrap;
padding-bottom: 300rpx;
}

21
packageAPI/pages/checkIsOpenAccessibility/index.js 100644
View File

@ -0,0 +1,21 @@
Page({
/**
* 页面的初始数据
*/
data: {
status: ''
},
checkIsOpenAccessibility () {
const self = this
wx.checkIsOpenAccessibility({
complete (res) {
console.log('checkIsOpenAccessibility complete: ', res)
self.setData({
status: res.open
})
}
})
}
})

3
packageAPI/pages/checkIsOpenAccessibility/index.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

6
packageAPI/pages/checkIsOpenAccessibility/index.wxml 100644
View File

@ -0,0 +1,6 @@
<view>
<view>
无障碍功能开启状态: {{status}}
</view>
<button type="primary" bindtap="checkIsOpenAccessibility">checkIsOpenAccessibility</button>
</view>

1
packageAPI/pages/checkIsOpenAccessibility/index.wxss 100644
View File

@ -0,0 +1 @@
/* pages/navcustom/navcustom.wxss */

15
packageAPI/pages/get-system-info/get-system-info.js
View File

@ -32,6 +32,21 @@ Page({
// Do something when catch error
}
},
getSystemInfoAsync () {
const that = this;
console.log('getSystemInfoAsync start')
wx.getSystemInfoAsync({
success(res) {
that.setData({
systemInfo: res
})
},
complete (res) {
console.log('getSystemInfoAsync complete: ', res)
}
})
console.log('getSystemInfoAsync end')
},
clearInfo() {
this.setData({
systemInfo: {}

1
packageAPI/pages/get-system-info/get-system-info.wxml
View File

@ -76,6 +76,7 @@
<view class="btn-area">
<button type="primary" bindtap="getSystemInfo">获取手机系统信息</button>
<button type="primary" bindtap="getSystemInfoSync">同步获取手机系统信息</button>
<button type="primary" bindtap="getSystemInfoAsync">异步获取手机系统信息getSystemInfoAsync</button>
<button bindtap="clearInfo">清空</button>
</view>
</view>

15
packageAPI/pages/getRandomValues/getRandomValues.js 100644
View File

@ -0,0 +1,15 @@
const app = getApp()
Page({
data: {
},
getRandomValues () {
wx.getRandomValues({
length: 20,
complete (res) {
console.log('getRandomValues complete: ', res)
}
})
}
})

3
packageAPI/pages/getRandomValues/getRandomValues.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

3
packageAPI/pages/getRandomValues/getRandomValues.wxml 100644
View File

@ -0,0 +1,3 @@
<view>
<button type="primary" bindtap="getRandomValues">getRandomValues</button>
</view>

0
packageAPI/pages/getRandomValues/getRandomValues.wxss 100644
View File

149
packageAPI/pages/locationapi/index.js 100644
View File

@ -0,0 +1,149 @@
Page({
data: {
openLocation_latitude: 22.53332,
openLocation_longitude: 113.93041,
openLocation_scale: 18,
openLocation_name: 'testname',
openLocation_address: 'addressaddressaddressaddress',
getLocation_type: 'gcj02',
getLocation_altitude: 'false',
getLocation_isHighAccuracy: 'false',
getLocation_highAccuracyExpireTime: 3000,
chooseLocation_latitude: 22.53332,
chooseLocation_longitude: 113.93041
},
onLoad() {
},
valueChange (e) {
const { changekey } = e.target.dataset
const { value } = e.detail
const obj = {}
obj[changekey] = value
this.setData(obj)
},
emitopenLocation () {
let {
openLocation_latitude: latitude,
openLocation_longitude: longitude,
openLocation_scale: scale,
openLocation_name: name,
openLocation_address: address
} = this.data
const args = {}
try {
latitude = JSON.parse(latitude)
} catch (e) {}
try {
longitude = JSON.parse(longitude)
} catch (e) {}
try {
scale = JSON.parse(scale)
} catch (e) {}
// try {
// name = JSON.parse(name)
// } catch (e) {}
// try {
// address = JSON.parse(address)
// } catch (e) {}
latitude !== 'no' && (args.latitude = latitude)
longitude !== 'no' && (args.longitude = longitude)
scale !== 'no' && (args.scale = scale)
name !== 'no' && (args.name = name)
address !== 'no' && (args.address = address)
console.log('openLocation 参数: ', args)
wx.openLocation({
...args,
success (res) {
console.log('openLocation success: ', res)
},
fail (res) {
console.log('openLocation fail: ', res)
},
complete (res) {
console.log('openLocation complete: ', res)
}
})
},
emitgetLocation () {
let {
getLocation_type: type,
getLocation_altitude: altitude,
getLocation_isHighAccuracy: isHighAccuracy,
getLocation_highAccuracyExpireTime: highAccuracyExpireTime,
} = this.data
const args = {}
try {
type = JSON.parse(type)
} catch (e) {}
try {
altitude = JSON.parse(altitude)
} catch (e) {}
try {
isHighAccuracy = JSON.parse(isHighAccuracy)
} catch (e) {}
try {
highAccuracyExpireTime = JSON.parse(highAccuracyExpireTime)
} catch (e) {}
type !== 'no' && (args.type = type)
altitude !== 'no' && (args.altitude = altitude)
isHighAccuracy !== 'no' && (args.isHighAccuracy = isHighAccuracy)
highAccuracyExpireTime !== 'no' && (args.highAccuracyExpireTime = highAccuracyExpireTime)
console.log('getLocation 参数: ', args)
wx.getLocation({
...args,
success (res) {
console.log('getLocation success: ', res)
},
fail (res) {
console.log('getLocation fail: ', res)
},
complete (res) {
console.log('getLocation complete: ', res)
}
})
},
emitchoosePoi () {
wx.choosePoi({
success (res) {
console.log('emitchoosePoi success: ', res)
},
fail (res) {
console.log('emitchoosePoi fail: ', res)
},
complete (res) {
console.log('emitchoosePoi complete: ', res)
}
})
},
emitchooseLocation () {
let {
chooseLocation_latitude: latitude,
chooseLocation_longitude: longitude
} = this.data
const args = {}
try {
latitude = JSON.parse(latitude)
} catch (e) {}
try {
longitude = JSON.parse(longitude)
} catch (e) {}
latitude !== 'no' && (args.latitude = latitude)
longitude !== 'no' && (args.longitude = longitude)
console.log('chooseLocation 参数: ', args)
wx.chooseLocation({
...args,
success (res) {
console.log('chooseLocation success: ', res)
},
fail (res) {
console.log('chooseLocation fail: ', res)
},
complete (res) {
console.log('chooseLocation complete: ', res)
}
})
}
})

3
packageAPI/pages/locationapi/index.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

59
packageAPI/pages/locationapi/index.wxml 100644
View File

@ -0,0 +1,59 @@
<view>
<view>
输入框规则与map组件的一致，可以输入json串解析成各种类型的数据，no不传参
</view>
<view class="item">
<view class="key-change">
latitude: <input type="text" value="{{openLocation_latitude}}" bindinput="valueChange" data-changekey="openLocation_latitude" />
</view>
<view class="key-change">
longitude: <input type="text" value="{{openLocation_longitude}}" bindinput="valueChange" data-changekey="openLocation_longitude" />
</view>
<view class="key-change">
scale: <input type="text" value="{{openLocation_scale}}" bindinput="valueChange" data-changekey="openLocation_scale" />
</view>
<view class="key-change">
name: <input type="text" value="{{openLocation_name}}" bindinput="valueChange" data-changekey="openLocation_name" />
</view>
<view class="key-change">
address: <input type="text" value="{{openLocation_address}}" bindinput="valueChange" data-changekey="openLocation_address" />
</view>
<button bindtap="emitopenLocation" type="primary">openLocation</button>
</view>
<view class="item">
<view class="key-change">
type: <input type="text" value="{{getLocation_type}}" bindinput="valueChange" data-changekey="getLocation_type" />
</view>
<view class="key-change">
altitude: <input type="text" value="{{getLocation_altitude}}" bindinput="valueChange" data-changekey="getLocation_altitude" />
</view>
<view class="key-change">
isHighAccuracy: <input type="text" value="{{getLocation_isHighAccuracy}}" bindinput="valueChange" data-changekey="getLocation_isHighAccuracy" />
</view>
<view class="key-change">
highAccuracyExpireTime: <input type="text" value="{{getLocation_highAccuracyExpireTime}}" bindinput="valueChange" data-changekey="getLocation_highAccuracyExpireTime" />
</view>
<button bindtap="emitgetLocation" type="primary">getLocation</button>
</view>
<view class="item">
<button bindtap="emitchoosePoi" type="primary">choosePoi</button>
</view>
<view class="item">
<view class="key-change">
latitude: <input type="text" value="{{chooseLocation_latitude}}" bindinput="valueChange" data-changekey="chooseLocation_latitude" />
</view>
<view class="key-change">
longitude: <input type="text" value="{{chooseLocation_longitude}}" bindinput="valueChange" data-changekey="chooseLocation_longitude" />
</view>
<button bindtap="emitchooseLocation" type="primary">chooseLocation</button>
</view>
</view>

34
packageAPI/pages/locationapi/index.wxss 100644
View File

@ -0,0 +1,34 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}
.item{
border-bottom: 1px solid #dddddd;
padding: 20rpx;
margin-top: 20rpx;
}
.key-change{
display: flex;
padding: 7rpx;
}
.key-change input{
border: 1px solid #abcdef;
flex-grow: 1;
}

25
packageAPI/pages/on-network-status-change/on-network-status-change.js
View File

@ -12,12 +12,13 @@ Page({
},
onLoad() {
const that = this
wx.onNetworkStatusChange(function (res) {
that.setData({
isConnected: res.isConnected,
networkType: res.networkType
})
})
this.onNetworkStatusChange()
// wx.onNetworkStatusChange(function (res) {
// that.setData({
// isConnected: res.isConnected,
// networkType: res.networkType
// })
// })
},
onShow() {
const that = this
@ -29,5 +30,17 @@ Page({
})
}
})
},
networkstatuschangehandler (res) {
this.setData({
isConnected: res.isConnected,
networkType: res.networkType
})
},
onNetworkStatusChange () {
wx.onNetworkStatusChange(this.networkstatuschangehandler)
},
offNetworkStatusChange () {
wx.offNetworkStatusChange(this.networkstatuschangehandler)
}
})

4
packageAPI/pages/on-network-status-change/on-network-status-change.wxml
View File

@ -16,6 +16,10 @@
<text class="page-body-text-network-type">{{networkType}}</text>
</block>
</view>
<view>
<button type="primary" bindtap="offNetworkStatusChange">停止网络状态监听offNetworkStatusChange</button>
<button type="primary" bindtap="onNetworkStatusChange">开始网络状态监听onNetworkStatusChange</button>
</view>
</view>
</view>

21
pages/API/index/index.js
View File

@ -190,6 +190,9 @@ Page({
}, {
zh: '使用原生地图选择位置',
url: 'choose-location/choose-location'
}, {
zh: 'locationapi',
url: 'locationapi/index'
}
]
}, {
@ -236,6 +239,24 @@ Page({
url: 'Accelerometer/index'
}
],
}, {
id: 'encryption',
name: '加密',
pages: [
{
zh: 'getRandomValues',
url: 'getRandomValues/getRandomValues'
}
],
}, {
id: 'checkIsOpenAccessibility',
name: '无障碍',
pages: [
{
zh: 'checkIsOpenAccessibility',
url: 'checkIsOpenAccessibility/index'
}
],
}
],
isSetTabBarPage: false,

10
pages/component/index/index.js
View File

@ -12,7 +12,7 @@ Page({
id: 'view',
name: '视图容器',
open: false,
pages: ['view', 'scroll-view', 'swiper', 'match-media', 'movable', 'cover-view']
pages: ['view', 'scroll-view', 'swiper', 'match-media', 'movable', 'cover-view','page-container', 'share-element']
}, {
id: 'content',
name: '基础内容',
@ -22,7 +22,7 @@ Page({
id: 'form',
name: '表单组件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea','editor']
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea','editor','keyboard-accessory']
}, {
id: 'nav',
name: '导航',
@ -32,7 +32,7 @@ Page({
id: 'media',
name: '媒体组件',
open: false,
pages: ['image', 'video', 'camera']
pages: ['image', 'video', 'camera', 'webrtc']
}, {
id: 'canvas',
name: '画布',
@ -47,6 +47,10 @@ Page({
id: 'page-attr',
name: '页面属性配置节点',
pages: ['page-meta']
}, {
id: 'map',
name: '地图',
pages: ['map','multiple-map']
}
],
theme: 'light'

78
pages/component/keyboard-accessory/keyboard-accessory.js 100644
View File

@ -0,0 +1,78 @@
const app = getApp()
Page({
data: {
height: 50,
flex: 1,
show: true,
position: 0,
kbastyle: `height: 66px;position:44;`,
editingvalue: `height: 66px;`,
covershow: false
},
onLoad: function () {
},
focus1() {
console.log('focus input\n')
},
blur1() {
console.log('blur input')
},
focus2() {
console.log('focus textarea')
},
blur2() {
console.log('blur textarea')
},
tap (e) {
console.log('bindtap', e)
},
positionchange (e) {
console.log(e.detail.value)
this.setData({
position: e.detail.value
})
},
textareainput (e) {
const value = e.detail.value || ''
console.log('textareainput', value)
// const reg = new RegExp(`(?<=;)position:.*?(?=;)`)
// const hasp = reg.exec(value)
const hasp = value.indexOf('position:')
console.log('textareainput', hasp)
if (hasp > -1) {
console.log('textareainput hasp ', value.slice((hasp+9), -1))
this.setData({
position: value.slice((hasp+9), -1)
})
}
this.setData({
kbastyle: value
})
},
kbheightchange (e) {
console.log('~~~~~~~~~~kbheightchange~~~~~~~~', e)
},
kbfocus () {
console.log('~~~~~~~~~~kbfocus~~~~~~~~')
},
kbblur () {
console.log('~~~~~~~~~~kbblur~~~~~~~~')
},
changecovershow () {
this.setData({
covershow: !this.data.covershow
})
}
})

3
pages/component/keyboard-accessory/keyboard-accessory.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

36
pages/component/keyboard-accessory/keyboard-accessory.wxml 100644
View File

@ -0,0 +1,36 @@
<view>
<input type="text" value="{{position}}"
bindinput="positionchange"
placeholder="keyboard-accessory的position"
bindkeyboardheightchange="kbheightchange"
bindfocus="kbfocus"
bindblur="kbblur"
/>
<input style="margin-top: 100px;" placeholder="input" bindfocus="focus1" bindblur="blur1" hold-keyboard>
<keyboard-accessory position="{{position}}" style="height: 250px;width: 150px;padding-left: 40px;">
<cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;width: 30px; height: 150px;">
<cover-view style="width: 30px; height: 30px; background: blue;color: cornsilk;">click</cover-view>
</cover-view>
<cover-image bindtap="tap" src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; width: 50px;height: 150px; background: red;">
</cover-image>
</keyboard-accessory>
</input>
<textarea hold-keyboard="{{true}}" style="margin-top: 200px;" placeholder="textarea1" bindfocus="focus2" bindblur="blur2" cursor-spacing="70">
<keyboard-accessory position="{{position}}" class="container" style="height: 50px;width: 500px;">
<cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">textarea1</cover-view>
<cover-view bindtap="tap" style="flex: 1; width: 50px; background: red;">2</cover-view>
</keyboard-accessory>
</textarea>
<view>测试update。 以下输入框的内容将会作为keyboard-accessory的style属性。 匹配position改变position值。 例如：height: 66px;position:44;</view>
<textarea value="{{kbastyle}}" hold-keyboard="{{true}}" placeholder="keyboard-accessary组件update事件" bindfocus="focus2" bindblur="blur2" bindinput="textareainput">
<keyboard-accessory position="{{position}}" class="container" style="{{kbastyle}}">
<cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">textarea1</cover-view>
<cover-view bindtap="tap" style="flex: 1; width: 50px; background: red;">2</cover-view>
</keyboard-accessory>
</textarea>
</view>

8
pages/component/keyboard-accessory/keyboard-accessory.wxss 100644
View File

@ -0,0 +1,8 @@
.intro {
margin: 30px;
text-align: center;
}
.container {
display: flex;
}

1724
pages/component/map/map.js 100644
View File

File diff suppressed because it is too large Load Diff

5
pages/component/map/map.json 100644
View File

@ -0,0 +1,5 @@
{
"usingComponents": {},
"enablePullDownRefresh": false,
"navigationBarTitleText": "map组件用例"
}

1061
pages/component/map/map.wxml 100644
View File

File diff suppressed because it is too large Load Diff

58
pages/component/map/map.wxss 100644
View File

@ -0,0 +1,58 @@
.my-map{
width: 100%;
height: 200px;
}
.change-item{
display: flex;
border-bottom: 1px solid #4caf50;
padding: 5px;
}
.change-item2{
padding: 5px;
border-bottom: 1px solid #4caf50;
}
.change-input{
border: 1px solid #03e3ff;
display: inline-block;
border-radius: 5px;
width: 100%;
}
.label{
margin-right: 5px;
font-size: 40rpx;
color: deeppink;
}
.tabs{
display: flex;
white-space: nowrap;
}
.tab{
/* border: 1px solid #4caf50; */
margin: 5px;
border-radius: 5px;
padding: 5px;
border: 1px solid #3875FF;
color: #3875FF;
width: auto;
display: inline-block;
}
.tab.choosen{
background: #3875FF;
color: #ffffff;
}
.btn{
width: 100%!important;
}
scroll-view{
padding-bottom: 100rpx;
}
.my-picker{
color: #795548;
font-weight: 500;
font-size: 18px;
}
.callout1{
background-color: #03e3ff;
color: #ffffff;
}

111
pages/component/multiple-map/multiple-map.js 100644
View File

@ -0,0 +1,111 @@
// pages/mapmultiple/mapmultiple.js
Page({
/**
* 页面的初始数据
*/
data: {
no1: null,
no2: null,
no3: null,
non4: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const no1 = wx.createMapContext('abcdef1')
const no2 = wx.createMapContext('abcdef2')
const no3 = wx.createMapContext('abcdef3')
const no4 = wx.createMapContext('abcdef4')
this.setData({
no1,
no2,
no3,
no4
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
emitaddmarkers (e) {
console.log(e.target.dataset.mapid)
const mapcontext = this.data[`no${e.target.dataset.mapid}`]
mapcontext.getCenterLocation({
complete:(res) => {
console.log(res)
const { latitude, longitude } = res
mapcontext.addMarkers({
markers: [{
latitude, longitude
}],
complete: (res)=> {
console.log('addMarkers complete: ',res)
}
})
}
})
},
emitgetcenterlocation(e) {
const mapcontext = this.data[`no${e.target.dataset.mapid}`]
mapcontext.getCenterLocation({
iconPath: '/assets/images/logo.png',
success: (res) => {
console.log('debug: getCenterLocation succcess ', res)
},
fail: (res) => {
console.log('debug: getCenterLocation fail ', res)
},
complete: (res) => {
console.log('debug: getCenterLocation complete ', res)
}
})
}
})

4
pages/component/multiple-map/multiple-map.json 100644
View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "multiple map"
}

24
pages/component/multiple-map/multiple-map.wxml 100644
View File

@ -0,0 +1,24 @@
<view>
<view>
地图1 id: abcdef1
</view>
<map id="abcdef1"></map>
<view>
地图2 id: abcdef2 (只传latitude)
</view>
<map id="abcdef2" latitude="22.53332"></map>
<view>
地图3 id: abcdef3 (只传longitude)
</view>
<map id="abcdef3" longitude="113.93041"></map>
<view>
地图4 id: abcdef4
</view>
<map id="abcdef4"></map>
<button data-mapid="1" bindtap="emitaddmarkers">地图1 addMarkers</button>
<button data-mapid="1" bindtap="emitgetcenterlocation">地图1 getCenterLocation</button>
<button data-mapid="2" bindtap="emitaddmarkers">地图2 addMarkers</button>
<button data-mapid="3" bindtap="emitaddmarkers">地图3 addMarkers</button>
<button data-mapid="4" bindtap="emitaddmarkers">地图4 addMarkers</button>
</view>

1
pages/component/multiple-map/multiple-map.wxss 100644
View File

@ -0,0 +1 @@
/* pages/mapmultiple/mapmultiple.wxss */

96
pages/component/page-container/page-container.js 100644
View File

@ -0,0 +1,96 @@
const app = getApp()
Page({
data: {
show: false,
duration: 300,
position: 'right',
round: false,
overlay: false,
customStyle: '',
overlayStyle: '',
},
onLoad: function () {
},
onShow() {
},
popup(e) {
const position = e.currentTarget.dataset.position
let customStyle = ''
let duration = this.data.duration
switch(position) {
case 'top':
case 'bottom':
customStyle = 'height: 30%;'
break
case 'right':
break
}
this.setData({
position,
show: true,
customStyle,
duration
})
},
changeRound() {
this.setData({round: !this.data.round})
},
changeOverlay() {
this.setData({overlay: !this.data.overlay, show: true})
},
changeOverlayStyle(e) {
let overlayStyle = ''
const type = e.currentTarget.dataset.type
switch(type) {
case 'black':
overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
break
case 'white':
overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
break
case 'blur':
overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
}
this.setData({overlayStyle, show: true})
},
exit() {
// this.setData({show: false})
wx.navigateBack()
},
goTo(e) {
wx.navigateTo({url: `../shareElement/index`})
},
onBeforeEnter(res) {
console.log(res)
},
onEnter(res) {
console.log(res)
},
onAfterEnter(res) {
console.log(res)
},
onBeforeLeave(res) {
console.log(res)
},
onLeave(res) {
console.log(res)
},
onAfterLeave(res) {
console.log(res)
},
onClickOverlay(res) {
console.log(res)
}
})

3
pages/component/page-container/page-container.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

48
pages/component/page-container/page-container.wxml 100644
View File

@ -0,0 +1,48 @@
<view class="content">
<view class="title">弹出位置</view>
<view class="box">
<button class="btn" bindtap="popup" data-position="right">右侧弹出</button>
<button class="btn" bindtap="popup" data-position="top">顶部弹出</button>
<button class="btn" bindtap="popup" data-position="bottom">底部弹出</button>
<button class="btn" bindtap="popup" data-position="center">中央弹出</button>
</view>
<view class="title">弹窗圆角</view>
<view class="box">
<button class="btn" bindtap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
</view>
<view class="title">遮罩层</view>
<view class="box">
<button class="btn" bindtap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
<button class="btn" bindtap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
<button class="btn" bindtap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
<button class="btn" bindtap="changeOverlayStyle" data-type="blur">模糊遮罩</button>
</view>
<page-container
show="{{show}}"
round="{{round}}"
overlay="{{overlay}}"
duration="{{duration}}"
position="{{position}}"
close-on-slide-down="{{true}}"
bindbeforeenter="onBeforeEnter"
bindenter="onEnter"
bindafterenter="onAfterEnter"
bindbeforeleave="onBeforeLeave"
bindleave="onLeave"
bindafterleave="onAfterLeave"
bindclickoverlay="onClickOverlay"
custom-style="{{customStyle}}"
overlay-style="{{overlayStyle}}"
>
<view class="detail-page">
<button type="primary" bindtap="exit">推出</button>
</view>
</page-container>
</view>

36
pages/component/page-container/page-container.wxss 100644
View File

@ -0,0 +1,36 @@
page {
background-color: #ee5509;
color: #323232;
width: 100%;
height: 100%;
}
.box {
margin: 0 12px;
}
.title {
margin: 0;
padding: 32px 16px 16px;
color: rgba(69, 90, 100, 0.6);
font-weight: normal;
font-size: 18px;
line-height: 20px;
text-align: center;
}
.btn {
display: block;
width: 100%;
margin: 10px 0;
background-color: #fff;
}
.detail-page {
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}

107
pages/component/share-element/share-element.js 100644
View File

@ -0,0 +1,107 @@
import {contacts} from '../data/contact'
Page({
/**
* 页面的初始数据
*/
data: {
contacts,
contact: contacts[0],
transformIdx: 0,
position: 'center',
duration: 300,
show: false,
overlay: false
},
showNext(e) {
const idx = e.currentTarget.dataset.idx
this.setData({
show: true,
contact: contacts[idx],
transformIdx: idx
})
},
showPrev() {
this.setData({
show: false
})
},
onBeforeEnter(res) {
console.log(res)
},
onEnter(res) {
console.log(res)
},
onAfterEnter(res) {
console.log(res)
},
onBeforeLeave(res) {
console.log(res)
},
onLeave(res) {
console.log(res)
},
onAfterLeave(res) {
console.log(res)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
pages/component/share-element/share-element.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

57
pages/component/share-element/share-element.wxml 100644
View File

@ -0,0 +1,57 @@
<view>
<view class="screen screen1">
<block wx:for="{{contacts}}" wx:key="id" wx:for-item="contact">
<view class="contact" bindtap="showNext" data-idx="{{index}}">
<share-element class="avatar" key="avatar" duration="{{duration}}" transform="{{transformIdx === index}}">
<image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}"></image>
</share-element>
<share-element duration="{{duration}}" class="name" key="name" transform="{{transformIdx === index}}">
{{contact.name}}
</share-element>
<view class="list">
<view>Phone: {{contact.phone}}</view>
<view>Mobile: {{contact.mobile}}</view>
<view>Email: {{contact.email}}</view>
</view>
</view>
</block>
</view>
</view>
<page-container
show="{{show}}"
overlay="{{overlay}}"
close-on-slide-down
duration="{{duration}}"
position="{{position}}"
bindbeforeenter="onBeforeEnter"
bindenter="onEnter"
bindafterenter="onAfterEnter"
bindbeforeleave="onBeforeLeave"
bindleave="onLeave"
bindafterleave="onAfterLeave"
bindclickoverlay="onClickOverlay"
>
<view class="screen screen2">
<view class="contact">
<share-element class="avatar" duration="{{duration}}" key="avatar" transform>
<image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}" />
</share-element>
<share-element class="name" key="name" duration="{{duration}}" transform>
{{contact.name}}
</share-element>
<view class="paragraph {{show ? 'enter' : ''}}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
risus. Vestibulum eleifend dignissim.
</view>
<button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button>
</view>
</view>
</page-container>

85
pages/component/share-element/share-element.wxss 100644
View File

@ -0,0 +1,85 @@
/* app css stylesheet */
page {
color: #333;
background-color: #ddd;
overflow: hidden;
}
button {
border: 0 solid #0010ae;
background-color: #1f2afe;
color: #fff;
font-size: 120%;
padding: 8px 16px;
outline-width: 0;
-webkit-appearance: none;
box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}
.screen {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
-webkit-overflow-scrolling: touch;
}
.contact {
position: relative;
padding: 16px;
background-color: #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.avatar {
position: absolute;
top: 16px;
left: 16px;
font-size: 0;
}
.name {
height: 65px;
font-size: 2em;
font-weight: bold;
text-align: center;
margin-left: 30%;
}
.list {
padding-top: 8px;
padding-left: 32px;
}
.screen1 {
overflow-y: scroll;
padding: 0;
}
.screen1 .contact {
margin: 16px;
height: auto;
width: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.screen2-button {
display: block;
margin: 24px auto;
}
.paragraph {
-webkit-transition: transform ease-in-out 300ms;
transition: transform ease-in-out 300ms;
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.enter.paragraph {
transform: none;
}

186
pages/component/webrtc/webrtc.js 100644
View File

@ -0,0 +1,186 @@
// logs.js
let sockTask
let socketId
let pc1
let mediaRecorder
Page({
data: {
logs: [],
show: false,
toggle: true,
connectId: '',
toId: '',
localStream: null,
localStreamId: '',
remoteStreamId: '',
showwebrtc: true,
recordFile: ''
},
tuIdChange(e) {
this.setData({
toId: e.detail.value
})
},
onLoad() {
const connectId = Math.random().toString(36).slice(-4).toUpperCase()
this.setData({
connectId
})
},
startSocket() {
sockTask = wx.connectSocket({
url: 'wss://finogeeks-tools.finogeeks.club/webrtc-server',
// url: 'ws://localhost:8989',
complete (res) {
console.log('DEBUG: socket-staff |||| connectSocket complete: ', res)
}
})
sockTask.onOpen((res) => {
console.log('DEBUG: socket-staff |||| sockTask.onOpen: ', res)
sockTask.send({
data: JSON.stringify({
type: 'ready',
id: this.data.connectId
})
})
})
sockTask.onMessage(async (res) => {
let data
try {
data = JSON.parse(res.data)
} catch (e) {
data = {}
}
console.log('DEBUG: socket-staff |||| sockTask.onMessage: ', data)
if (data.type === 'sendOffer') {
// 收到 sendOffer 时，表示自己是 remote 端
await pc1.setRemoteDescription(data.args)
const answer = await pc1.createAnswer()
sockTask.send({
data: JSON.stringify({
type: 'sendAnswer',
args: answer,
to: data.from,
from: this.data.connectId
})
})
await pc1.setLocalDescription(answer)
}
if (data.type === 'sendAnswer') {
// 收到 answer 时，表示自己是 host 端
await pc1.setRemoteDescription(data.args)
}
if (data.type === 'icecandidate') {
await pc1.addIceCandidate(data.args)
}
})
},
async makeCall () {
const offer = await pc1.createOffer({
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
})
pc1.setLocalDescription(offer)
sockTask.send({
data: JSON.stringify({
type: 'sendOffer',
args: offer,
to: this.data.toId,
from: this.data.connectId
})
})
},
async startWebrtc() {
const stream = await wx.webrtc.mediaDevices.getUserMedia({ audio: true, video: true })
const { streamId } = stream
this.setData({
localStreamId: streamId,
localStream: stream
})
const servers = { iceServers: [{ urls: "stun:stun.stunprotocol.org" }] }
const mediaConstraints = { optional: [{ RtpDataChannels: true }] }
pc1 = wx.webrtc.createRTCPeerConnection(servers, mediaConstraints)
console.log('pc1', pc1.id)
pc1.addEventListener('icecandidate', e => {
console.log('DEBUG: listener-callback ---- icecandidate', e)
sockTask.send({
data: JSON.stringify({
args: e.candidate,
type: 'icecandidate',
to: this.data.toId,
from: this.data.connectId
}),
complete (res) {
console.log('sockTask.send complete: ',res)
}
})
});
pc1.addEventListener('negotiationneeded', e => {
console.log('DEBUG: listener-callback ---- negotiationneeded', e)
})
pc1.addEventListener('iceconnectionstatechange', e => {
console.log('DEBUG: listener-callback ---- iceconnectionstatechange', e)
})
pc1.addEventListener('signalingstatechange', e => {
console.log('DEBUG: listener-callback ---- signalingstatechange', e)
})
pc1.addEventListener('track', e => {
console.log('DEBUG: listener-callback ---- ontrack', e)
this.setData({
remoteStreamId: e.streamId
})
})
const tracks = stream.getTracks()
console.log('tracks: ', tracks)
tracks.forEach(t => {
pc1.addTrack(t)
})
},
goBack () {
wx.redirectTo({
url: '/pages/index/index',
})
},
webrtcshow () {
this.setData({
showwebrtc: !this.data.showwebrtc
})
},
newalocalRecord () {
mediaRecorder = wx.webrtc.createMediaRecorder(this.data.localStream)
mediaRecorder.ondataavailable = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.ondataavailable , ', event)
}
mediaRecorder.onerror = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.onerror , ', event)
}
mediaRecorder.onstop = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.onstop , ', event)
this.setData({
recordFile: event.tempFilePath
})
}
mediaRecorder.onresume = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.onresume , ', event)
}
mediaRecorder.onpause = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.onpause , ', event)
}
mediaRecorder.onstart = (event) => {
console.log('DEBUG: listener-callback ---- mediaRecorder.onstart , ', event)
}
},
startLocalRecord () {
mediaRecorder.start()
},
stopLocalRecord () {
mediaRecorder.stop()
}
})

5
pages/component/webrtc/webrtc.json 100644
View File

@ -0,0 +1,5 @@
{
"navigationBarTitleText": "webrtc",
"usingComponents": {
}
}

28
pages/component/webrtc/webrtc.wxml 100644
View File

@ -0,0 +1,28 @@
<view>
<view>id:{{connectId}}</view>
<view><input type="text" placeholder="对方id" value="{{toId}}" bindinput="tuIdChange" /></view>
<button bindtap="startSocket">建立socket</button>
<button bindtap="startWebrtc">start webrtc</button>
<button bindtap="makeCall">call</button>
<button bindtap="webrtcshow">show</button>
<button bindtap="newalocalRecord">创建本地录制</button>
<button bindtap="startLocalRecord">开始本地录制</button>
<button bindtap="stopLocalRecord">停止本地录制</button>
<view wx:if="{{showwebrtc}}">
<view>local:</view>
<webrtc-video muted class="my-webrtc-video" id="localwebrtcvideo" src="webrtc://{{localStreamId}}"></webrtc-video>
<!-- <webrtc-audio muted id="localwebrtcvideo" src="webrtc://{{localStreamId}}"></webrtc-audio> -->
<view>remote:</view>
<webrtc-video class="my-webrtc-video" id="remotewebrtcvideo" src="webrtc://{{remoteStreamId}}"></webrtc-video>
<!-- <webrtc-audio id="remotewebrtcvideo" src="webrtc://{{remoteStreamId}}"></webrtc-audio> -->
<view>录制：</view>
<video src="{{recordFile}}"></video>
</view>
</view>

14
pages/component/webrtc/webrtc.wxss 100644
View File

@ -0,0 +1,14 @@
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
.my-webrtc-video{
width: 300px;
height: 200px;
display: block;
border: 1px solid green;
}

13
project.config.json
View File

@ -21,6 +21,7 @@
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
@ -29,18 +30,20 @@
"disablePlugins": [],
"outputPath": ""
},
"bundle": false,
"enableEngineNative": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false
},
"compileType": "miniprogram",
"libVersion": "2.14.1",
"appid": "wx723eeedb1222c3c8",
"appid": "wx138369a2d5c3d945",
"projectname": "wx-api-v2",
"debugOptions": {
"hidedInDevtools": []

23
project.private.config.json 100644
View File

@ -0,0 +1,23 @@
{
"condition": {
"plugin": {
"list": []
},
"game": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": [
{
"name": "",
"pathName": "pages/component/button/button",
"query": "test1=123&test2=999",
"scene": null
}
]
}
}
}