├── pages ├── swiper │ ├── swiper.wxss │ ├── swiper.json │ ├── swiper.wxml │ └── swiper.js ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── canvas │ ├── canvas.json │ ├── canvas.wxml │ ├── canvas.wxss │ └── canvas.js └── index │ ├── index.js │ ├── index.wxss │ └── index.wxml ├── static └── images │ └── think.png ├── app.js ├── README.md ├── app.wxss ├── app.json └── utils └── util.js /pages/swiper/swiper.wxss: -------------------------------------------------------------------------------- 1 | /* pages/touchmove/touchmove.wxss */ -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /pages/canvas/canvas.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "canvas" 3 | } -------------------------------------------------------------------------------- /pages/swiper/swiper.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "swiper" 3 | } -------------------------------------------------------------------------------- /static/images/think.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yongxinz/minapp-example/HEAD/static/images/think.png -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | 4 | }, 5 | globalData: { 6 | userInfo: null 7 | } 8 | }) -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | bindCanvas: function () { 3 | wx.navigateTo({ url: '../canvas/canvas' }) 4 | }, 5 | 6 | bindTouchMove: function () { 7 | wx.navigateTo({ url: '../swiper/swiper' }) 8 | } 9 | }); -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .section{ 2 | background-color: white; 3 | margin: 50rpx 30rpx 15rpx 30rpx; 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | .title { 9 | font-size: 40rpx; 10 | margin: 40rpx; 11 | } 12 | -------------------------------------------------------------------------------- /pages/canvas/canvas.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 欢迎关注我的微信公众号 AlwaysBeta，更多精彩内容等你来。 2 | 3 | ![](http://user-gold-cdn.xitu.io/2020/1/17/16fb0d4a31ae61a6?w=258&h=258&f=jpeg&s=20946) 4 | 5 | # wxAppDemo 6 | 7 | 微信小程序的一些 Demo 8 | 9 | ## 使用 canvas 生成朋友圈分享图片并保存到手机相册 10 | ![](http://ohl540wt2.bkt.clouddn.com/canvas.gif) -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 使用 canvas 生成图片并保存到手机相册 4 | 5 | 6 | 7 | 左右滑动切换页面 8 | 9 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #f0f0f0; 3 | } 4 | 5 | .container { 6 | height: 100%; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: space-between; 11 | padding: 200rpx 0; 12 | box-sizing: border-box; 13 | } 14 | -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return util.formatTime(new Date(log)) 12 | }) 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/canvas/canvas", 5 | "pages/swiper/swiper" 6 | ], 7 | "window": { 8 | "backgroundTextStyle": "light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "WeChat", 11 | "navigationBarTextStyle": "black" 12 | } 13 | } -------------------------------------------------------------------------------- /pages/canvas/canvas.wxss: -------------------------------------------------------------------------------- 1 | .edit-footer { 2 | height: 60px; 3 | margin-top: 20px; 4 | padding-left: 40rpx; 5 | padding-right: 40rpx; 6 | background-color: back; 7 | display: flex; 8 | align-items: center; 9 | } 10 | 11 | .button-done { 12 | width: 100%; 13 | border-radius: 50rpx!important; 14 | /*background: linear-gradient(to right, red , blue);*/ 15 | } -------------------------------------------------------------------------------- /pages/swiper/swiper.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | interval 11 | duration -------------------------------------------------------------------------------- /pages/swiper/swiper.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | imgUrls: [ 4 | 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 5 | 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 6 | 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' 7 | ], 8 | indicatorDots: false, 9 | autoplay: false, 10 | interval: 5000, 11 | duration: 1000 12 | }, 13 | changeIndicatorDots: function (e) { 14 | this.setData({ 15 | indicatorDots: !this.data.indicatorDots 16 | }) 17 | }, 18 | changeAutoplay: function (e) { 19 | this.setData({ 20 | autoplay: !this.data.autoplay 21 | }) 22 | }, 23 | intervalChange: function (e) { 24 | this.setData({ 25 | interval: e.detail.value 26 | }) 27 | }, 28 | durationChange: function (e) { 29 | this.setData({ 30 | duration: e.detail.value 31 | }) 32 | } 33 | }) -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | function savePicToAlbum(tempFilePath) { 18 | let that = this; 19 | wx.getSetting({ 20 | success(res) { 21 | if (!res.authSetting['scope.writePhotosAlbum']) { 22 | wx.authorize({ 23 | scope: 'scope.writePhotosAlbum', 24 | success() { 25 | wx.saveImageToPhotosAlbum({ 26 | filePath: tempFilePath, 27 | success(res) { 28 | wx.showToast({ 29 | title: '保存成功' 30 | }); 31 | }, 32 | fail(res) { 33 | console.log(res); 34 | } 35 | }) 36 | }, 37 | fail() { 38 | // 用户拒绝授权,打开设置页面 39 | wx.openSetting({ 40 | success: function (data) { 41 | console.log("openSetting: success"); 42 | }, 43 | fail: function (data) { 44 | console.log("openSetting: fail"); 45 | } 46 | }); 47 | } 48 | }) 49 | } else { 50 | wx.saveImageToPhotosAlbum({ 51 | filePath: tempFilePath, 52 | success(res) { 53 | wx.showToast({ 54 | title: '保存成功', 55 | }); 56 | }, 57 | fail(res) { 58 | console.log(res); 59 | } 60 | }) 61 | } 62 | }, 63 | fail(res) { 64 | console.log(res); 65 | } 66 | }) 67 | } 68 | 69 | module.exports = { 70 | formatTime: formatTime, 71 | savePicToAlbum: savePicToAlbum 72 | } 73 | -------------------------------------------------------------------------------- /pages/canvas/canvas.js: -------------------------------------------------------------------------------- 1 | import util from '../../utils/util' 2 | 3 | const app = getApp(); 4 | 5 | Page({ 6 | data: { 7 | windowWidth: 0, 8 | windowHeight: 0, 9 | contentHeight: 0, 10 | thinkList: [], 11 | footer: '', 12 | offset: 0, 13 | lineHeight: 30, 14 | content: '王小波的黄金时代有一片紫色的天空，天上飘着懒洋洋的云，他有好多奢望，想爱，想吃，想和陈清扬敦伟大的友谊。' 15 | }, 16 | 17 | onLoad: function (options) { 18 | let that = this; 19 | wx.getSystemInfo({ 20 | success: function (res) { 21 | that.setData({ 22 | windowWidth: res.windowWidth, 23 | windowHeight: res.windowHeight, 24 | offset: (res.windowWidth - 300) / 2 25 | }); 26 | } 27 | }); 28 | }, 29 | 30 | onShow: function () { 31 | this.getData() 32 | }, 33 | 34 | getData: function () { 35 | let that = this; 36 | 37 | let i = 0; 38 | let lineNum = 1; 39 | let thinkStr = ''; 40 | let thinkList = []; 41 | for (let item of that.data.content) { 42 | if (item === '\n') { 43 | thinkList.push(thinkStr); 44 | thinkList.push('a'); 45 | i = 0; 46 | thinkStr = ''; 47 | lineNum += 1; 48 | } else if (i === 19) { 49 | thinkList.push(thinkStr); 50 | i = 1; 51 | thinkStr = item; 52 | lineNum += 1; 53 | } else { 54 | thinkStr += item; 55 | i += 1; 56 | } 57 | } 58 | thinkList.push(thinkStr); 59 | that.setData({ thinkList: thinkList }); 60 | that.createNewImg(lineNum); 61 | }, 62 | 63 | drawSquare: function (ctx, height) { 64 | ctx.rect(0, 50, this.data.windowWidth, height); 65 | ctx.setFillStyle("#f5f6fd"); 66 | ctx.fill() 67 | }, 68 | 69 | drawFont: function (ctx, content, height) { 70 | ctx.setFontSize(16); 71 | ctx.setFillStyle("#484a3d"); 72 | ctx.fillText(content, this.data.offset, height); 73 | }, 74 | 75 | drawLine: function (ctx, height) { 76 | ctx.beginPath(); 77 | ctx.moveTo(this.data.offset, height); 78 | ctx.lineTo(this.data.windowWidth - this.data.offset, height); 79 | ctx.stroke('#eee'); 80 | ctx.closePath(); 81 | }, 82 | 83 | createNewImg: function (lineNum) { 84 | let that = this; 85 | let ctx = wx.createCanvasContext('myCanvas'); 86 | let contentHeight = lineNum * that.data.lineHeight + 180; 87 | that.drawSquare(ctx, contentHeight); 88 | that.setData({ contentHeight: contentHeight }); 89 | let height = 100; 90 | for (let item of that.data.thinkList) { 91 | if (item !== 'a') { 92 | that.drawFont(ctx, item, height); 93 | height += that.data.lineHeight; 94 | } 95 | } 96 | that.drawLine(ctx, lineNum * that.data.lineHeight + 120); 97 | that.drawFont(ctx, that.data.footer, lineNum * that.data.lineHeight + 156); 98 | ctx.drawImage('../../static/images/think.png', that.data.windowWidth - that.data.offset - 50, lineNum * that.data.lineHeight + 125, 50, 50); 99 | ctx.draw(); 100 | }, 101 | 102 | savePic: function () { 103 | let that = this; 104 | wx.canvasToTempFilePath({ 105 | x: 0, 106 | y: 50, 107 | width: that.data.windowWidth, 108 | height: that.data.contentHeight, 109 | canvasId: 'myCanvas', 110 | success: function (res) { 111 | util.savePicToAlbum(res.tempFilePath) 112 | } 113 | }) 114 | } 115 | }); --------------------------------------------------------------------------------