├── README.txt
├── app.wxss
├── pages
├── topicdetail
│ ├── index.json
│ ├── index.wxml
│ ├── index.wxss
│ └── index.js
├── login
│ ├── login.json
│ ├── login.js
│ ├── login.wxml
│ └── login.wxss
└── index
│ ├── index.wxml
│ ├── index.js
│ └── index.wxss
├── imgs
├── cars.png
├── home.png
├── logo.png
├── mine.png
├── active.png
├── camear.png
├── emoji.png
├── home_a.png
├── mine_a.png
├── to-top.png
├── trend.png
├── add-face.png
├── back-home.png
├── back-pre.png
├── banaer-no.jpg
├── canvas-bg.jpg
├── flage-eu.png
├── flage-jp.png
├── flage-us.png
├── flage-zh.png
├── home-good.png
├── my-edit.png
├── my-share.png
├── no-banner.png
├── no-data1.png
├── no-data2.png
├── support.png
├── trend-dot.png
├── trend-sys.png
├── trend_a.png
├── add-posting.png
├── delete-img.png
├── draft-edit.png
├── draft-trash.png
├── home-replay.png
├── home-search.png
├── home-share.png
├── no-support.png
├── post_cover.png
├── share-logo.png
├── trend-arrow.png
├── user-addcar.png
├── user-focus.png
├── bottom-message.png
├── bottom-share.png
├── bottom-support.png
├── carport-edit.png
├── carport-share.png
├── carport-trash.png
├── checked-fail.png
├── draft-no-edit.png
├── draft-preview.png
├── draft-publish.png
├── home-browser.png
├── next-comment.png
├── post-computer.png
├── recomment-icon.png
├── search-reset.png
├── topic-share-wx.png
├── trash-detail.png
├── trend-comment.png
├── trend-replay.png
├── user-focused.png
├── bottom-messageww.png
├── del-posting-img.png
├── topic-collection.png
├── topic-share-wx1.png
├── topic-share-wx2.png
├── bottom-no-support.png
├── topic-no-collection.png
├── topic-share-friends.png
├── topic-share-friends1.png
└── topic-share-friends2.png
├── app.json
├── app.js
├── project.config.json
├── font.wxss
├── wxParse
├── wxParse.js
├── wxParse.wxss
├── htmlparser.js
├── wxDiscode.js
├── html2json.js
└── wxParse.wxml
└── utils
└── $.js
/README.txt:
--------------------------------------------------------------------------------
1 | 下载demo 直接打开点击下面按钮，生成图片，长按保存
2 |
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | @import './font.wxss';
2 |
3 |
--------------------------------------------------------------------------------
/pages/topicdetail/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "动态详情"
3 | }
--------------------------------------------------------------------------------
/imgs/cars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/cars.png
--------------------------------------------------------------------------------
/imgs/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home.png
--------------------------------------------------------------------------------
/imgs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/logo.png
--------------------------------------------------------------------------------
/imgs/mine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/mine.png
--------------------------------------------------------------------------------
/imgs/active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/active.png
--------------------------------------------------------------------------------
/imgs/camear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/camear.png
--------------------------------------------------------------------------------
/imgs/emoji.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/emoji.png
--------------------------------------------------------------------------------
/imgs/home_a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home_a.png
--------------------------------------------------------------------------------
/imgs/mine_a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/mine_a.png
--------------------------------------------------------------------------------
/imgs/to-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/to-top.png
--------------------------------------------------------------------------------
/imgs/trend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend.png
--------------------------------------------------------------------------------
/imgs/add-face.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/add-face.png
--------------------------------------------------------------------------------
/imgs/back-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/back-home.png
--------------------------------------------------------------------------------
/imgs/back-pre.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/back-pre.png
--------------------------------------------------------------------------------
/imgs/banaer-no.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/banaer-no.jpg
--------------------------------------------------------------------------------
/imgs/canvas-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/canvas-bg.jpg
--------------------------------------------------------------------------------
/imgs/flage-eu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/flage-eu.png
--------------------------------------------------------------------------------
/imgs/flage-jp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/flage-jp.png
--------------------------------------------------------------------------------
/imgs/flage-us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/flage-us.png
--------------------------------------------------------------------------------
/imgs/flage-zh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/flage-zh.png
--------------------------------------------------------------------------------
/imgs/home-good.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home-good.png
--------------------------------------------------------------------------------
/imgs/my-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/my-edit.png
--------------------------------------------------------------------------------
/imgs/my-share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/my-share.png
--------------------------------------------------------------------------------
/imgs/no-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/no-banner.png
--------------------------------------------------------------------------------
/imgs/no-data1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/no-data1.png
--------------------------------------------------------------------------------
/imgs/no-data2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/no-data2.png
--------------------------------------------------------------------------------
/imgs/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/support.png
--------------------------------------------------------------------------------
/imgs/trend-dot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend-dot.png
--------------------------------------------------------------------------------
/imgs/trend-sys.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend-sys.png
--------------------------------------------------------------------------------
/imgs/trend_a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend_a.png
--------------------------------------------------------------------------------
/imgs/add-posting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/add-posting.png
--------------------------------------------------------------------------------
/imgs/delete-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/delete-img.png
--------------------------------------------------------------------------------
/imgs/draft-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/draft-edit.png
--------------------------------------------------------------------------------
/imgs/draft-trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/draft-trash.png
--------------------------------------------------------------------------------
/imgs/home-replay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home-replay.png
--------------------------------------------------------------------------------
/imgs/home-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home-search.png
--------------------------------------------------------------------------------
/imgs/home-share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home-share.png
--------------------------------------------------------------------------------
/imgs/no-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/no-support.png
--------------------------------------------------------------------------------
/imgs/post_cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/post_cover.png
--------------------------------------------------------------------------------
/imgs/share-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/share-logo.png
--------------------------------------------------------------------------------
/imgs/trend-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend-arrow.png
--------------------------------------------------------------------------------
/imgs/user-addcar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/user-addcar.png
--------------------------------------------------------------------------------
/imgs/user-focus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/user-focus.png
--------------------------------------------------------------------------------
/imgs/bottom-message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/bottom-message.png
--------------------------------------------------------------------------------
/imgs/bottom-share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/bottom-share.png
--------------------------------------------------------------------------------
/imgs/bottom-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/bottom-support.png
--------------------------------------------------------------------------------
/imgs/carport-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/carport-edit.png
--------------------------------------------------------------------------------
/imgs/carport-share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/carport-share.png
--------------------------------------------------------------------------------
/imgs/carport-trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/carport-trash.png
--------------------------------------------------------------------------------
/imgs/checked-fail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/checked-fail.png
--------------------------------------------------------------------------------
/imgs/draft-no-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/draft-no-edit.png
--------------------------------------------------------------------------------
/imgs/draft-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/draft-preview.png
--------------------------------------------------------------------------------
/imgs/draft-publish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/draft-publish.png
--------------------------------------------------------------------------------
/imgs/home-browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/home-browser.png
--------------------------------------------------------------------------------
/imgs/next-comment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/next-comment.png
--------------------------------------------------------------------------------
/imgs/post-computer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/post-computer.png
--------------------------------------------------------------------------------
/imgs/recomment-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/recomment-icon.png
--------------------------------------------------------------------------------
/imgs/search-reset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/search-reset.png
--------------------------------------------------------------------------------
/imgs/topic-share-wx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-wx.png
--------------------------------------------------------------------------------
/imgs/trash-detail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trash-detail.png
--------------------------------------------------------------------------------
/imgs/trend-comment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend-comment.png
--------------------------------------------------------------------------------
/imgs/trend-replay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/trend-replay.png
--------------------------------------------------------------------------------
/imgs/user-focused.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/user-focused.png
--------------------------------------------------------------------------------
/imgs/bottom-messageww.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/bottom-messageww.png
--------------------------------------------------------------------------------
/imgs/del-posting-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/del-posting-img.png
--------------------------------------------------------------------------------
/imgs/topic-collection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-collection.png
--------------------------------------------------------------------------------
/imgs/topic-share-wx1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-wx1.png
--------------------------------------------------------------------------------
/imgs/topic-share-wx2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-wx2.png
--------------------------------------------------------------------------------
/pages/login/login.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "登录",
3 | "enablePullDownRefresh": false
4 |
5 | }
--------------------------------------------------------------------------------
/imgs/bottom-no-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/bottom-no-support.png
--------------------------------------------------------------------------------
/imgs/topic-no-collection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-no-collection.png
--------------------------------------------------------------------------------
/imgs/topic-share-friends.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-friends.png
--------------------------------------------------------------------------------
/imgs/topic-share-friends1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-friends1.png
--------------------------------------------------------------------------------
/imgs/topic-share-friends2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DoctorDxs/wx-canvas-to-img/HEAD/imgs/topic-share-friends2.png
--------------------------------------------------------------------------------
/pages/login/login.js:
--------------------------------------------------------------------------------
1 | // pages/login/login.js
2 | Page({
3 | getUserInfo (e) {
4 | var data = e.detail;
5 | wx.$.login(data)
6 | }
7 | })
--------------------------------------------------------------------------------
/pages/login/login.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 | "pages/index/index",
4 | "pages/topicdetail/index",
5 | "pages/login/login"
6 | ],
7 | "window":{
8 | "navigationBarTitleText": "轟Plus",
9 | "navigationBarTextStyle": "black",
10 | "navigationBarBackgroundColor": "#ffffff"
11 | }
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 | import './utils/$'
3 | App({
4 | onLaunch: function () {
5 |
6 | },
7 | onShow: function (opp) {
8 | if (opp.scene == 1007 || opp.scene == 1008) {
9 | wx.setStorageSync('share', true)
10 | } else {
11 | wx.setStorageSync('share', false)
12 | }
13 | },
14 | globalData: {
15 |
16 | }
17 | })
--------------------------------------------------------------------------------
/pages/login/login.wxss:
--------------------------------------------------------------------------------
1 | /* pages/login/login.wxss */
2 |
3 | .login-autho {
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | }
8 |
9 | .login-autho image{
10 | width: 160rpx;
11 | height: 160rpx;
12 | margin: 300rpx 500rpx;
13 | padding: 10rpx;
14 | }
15 |
16 | .login-autho button {
17 | width: 670rpx;
18 | background: #000000;
19 | color: #fff;
20 | }
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "packOptions": {
4 | "ignore": []
5 | },
6 | "setting": {
7 | "urlCheck": true,
8 | "es6": true,
9 | "postcss": true,
10 | "minified": true,
11 | "newFeature": true
12 | },
13 | "compileType": "miniprogram",
14 | "libVersion": "2.1.1",
15 | "appid": "wxa077f149129f3f96",
16 | "projectname": "qq",
17 | "isGameTourist": false,
18 | "condition": {
19 | "search": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "conversation": {
24 | "current": -1,
25 | "list": []
26 | },
27 | "game": {
28 | "currentL": -1,
29 | "list": []
30 | },
31 | "miniprogram": {
32 | "current": -1,
33 | "list": []
34 | }
35 | }
36 | }
--------------------------------------------------------------------------------
/font.wxss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'iconfont'; /* project id 619420 */
3 | src: url('//at.alicdn.com/t/font_619420_n0och6yz9mc.eot');
4 | src: url('//at.alicdn.com/t/font_619420_n0och6yz9mc.eot?#iefix') format('embedded-opentype'),
5 | url('//at.alicdn.com/t/font_619420_n0och6yz9mc.woff') format('woff'),
6 | url('//at.alicdn.com/t/font_619420_n0och6yz9mc.ttf') format('truetype'),
7 | url('//at.alicdn.com/t/font_619420_n0och6yz9mc.svg#iconfont') format('svg');
8 | }
9 |
10 | .iconfont {
11 | font-family: "iconfont" !important;
12 | font-size: 40rpx;
13 | font-style: normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-previewright:before {content: '\e75c';}
19 |
20 | .icon-xiangshangshouqi:before {content: '\e8f5';}
21 |
22 | .icon-xiangxiazhankai:before {content: '\e8f2';}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{detail.member.name}}
9 |
10 |
11 |
12 | {{detail.post_title}}
13 | {{detail.created_at}}
14 |
15 |
16 |
17 |
18 |
19 | {{current + 1}}
20 | \ {{detail.garageImage.length}}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 分享到：
41 |
42 |
43 |
44 | 朋友圈
45 |
46 |
47 |
48 | 微信
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | 长按图片保存至相册，快去分享吧！
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | 是否打开授权设置？
72 |
73 | 取消
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/wxParse/wxParse.js:
--------------------------------------------------------------------------------
1 | /**
2 | * author: Di (微信小程序开发工程师)
3 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
4 | * 垂直微信小程序开发交流社区
5 | *
6 | * github地址: https://github.com/icindy/wxParse
7 | *
8 | * for: 微信小程序富文本解析
9 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
10 | */
11 |
12 | /**
13 | * utils函数引入
14 | **/
15 | import showdown from './showdown.js';
16 | import HtmlToJson from './html2json.js';
17 | /**
18 | * 配置及公有属性
19 | **/
20 | var realWindowWidth = 0;
21 | var realWindowHeight = 0;
22 | wx.getSystemInfo({
23 | success: function (res) {
24 | realWindowWidth = res.windowWidth
25 | realWindowHeight = res.windowHeight
26 | }
27 | })
28 | /**
29 | * 主函数入口区
30 | **/
31 | function wxParse(bindName = 'wxParseData', type='html', data='数据不能为空
', target,imagePadding) {
32 | var that = target;
33 | var transData = {};//存放转化后的数据
34 | if (type == 'html') {
35 | transData = HtmlToJson.html2json(data, bindName);
36 | // console.log(JSON.stringify(transData, ' ', ' '));
37 | } else if (type == 'md' || type == 'markdown') {
38 | var converter = new showdown.Converter();
39 | var html = converter.makeHtml(data);
40 | transData = HtmlToJson.html2json(html, bindName);
41 | // console.log(JSON.stringify(transData, ' ', ' '));
42 | }
43 | transData.view = {};
44 | transData.view.imagePadding = 0;
45 | if(typeof(imagePadding) != 'undefined'){
46 | transData.view.imagePadding = imagePadding
47 | }
48 | var bindData = {};
49 | bindData[bindName] = transData;
50 | that.setData(bindData)
51 | that.wxParseImgLoad = wxParseImgLoad;
52 | that.wxParseImgTap = wxParseImgTap;
53 | }
54 | // 图片点击事件
55 | function wxParseImgTap(e) {
56 | var that = this;
57 | var nowImgUrl = e.target.dataset.src;
58 | var tagFrom = e.target.dataset.from;
59 | if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
60 | wx.previewImage({
61 | current: nowImgUrl, // 当前显示图片的http链接
62 | urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
63 | })
64 | }
65 | }
66 |
67 | /**
68 | * 图片视觉宽高计算函数区
69 | **/
70 | function wxParseImgLoad(e) {
71 | var that = this;
72 | var tagFrom = e.target.dataset.from;
73 | var idx = e.target.dataset.idx;
74 | if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
75 | calMoreImageInfo(e, idx, that, tagFrom)
76 | }
77 | }
78 | // 假循环获取计算图片视觉最佳宽高
79 | function calMoreImageInfo(e, idx, that, bindName) {
80 | var temData = that.data[bindName];
81 | if (!temData || temData.images.length == 0) {
82 | return;
83 | }
84 | var temImages = temData.images;
85 | //因为无法获取view宽度 需要自定义padding进行计算，稍后处理
86 | var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);
87 | // temImages[idx].width = recal.imageWidth;
88 | // temImages[idx].height = recal.imageheight;
89 | // temData.images = temImages;
90 | // var bindData = {};
91 | // bindData[bindName] = temData;
92 | // that.setData(bindData);
93 | var index = temImages[idx].index
94 | var key = `${bindName}`
95 | for (var i of index.split('.')) key+=`.nodes[${i}]`
96 | var keyW = key + '.width'
97 | var keyH = key + '.height'
98 | that.setData({
99 | [keyW]: recal.imageWidth,
100 | [keyH]: recal.imageheight,
101 | })
102 | }
103 |
104 | // 计算视觉优先的图片宽高
105 | function wxAutoImageCal(originalWidth, originalHeight,that,bindName) {
106 | //获取图片的原始长宽
107 | var windowWidth = 0, windowHeight = 0;
108 | var autoWidth = 0, autoHeight = 0;
109 | var results = {};
110 | var padding = that.data[bindName].view.imagePadding;
111 | windowWidth = realWindowWidth-2*padding;
112 | windowHeight = realWindowHeight;
113 | //判断按照那种方式进行缩放
114 | // console.log("windowWidth" + windowWidth);
115 | if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候
116 | autoWidth = windowWidth;
117 | // console.log("autoWidth" + autoWidth);
118 | autoHeight = (autoWidth * originalHeight) / originalWidth;
119 | // console.log("autoHeight" + autoHeight);
120 | results.imageWidth = autoWidth;
121 | results.imageheight = autoHeight;
122 | } else {//否则展示原来的数据
123 | results.imageWidth = originalWidth;
124 | results.imageheight = originalHeight;
125 | }
126 | return results;
127 | }
128 |
129 | function wxParseTemArray(temArrayName,bindNameReg,total,that){
130 | var array = [];
131 | var temData = that.data;
132 | var obj = null;
133 | for(var i = 0; i < total; i++){
134 | var simArr = temData[bindNameReg+i].nodes;
135 | array.push(simArr);
136 | }
137 |
138 | temArrayName = temArrayName || 'wxParseTemArray';
139 | obj = JSON.parse('{"'+ temArrayName +'":""}');
140 | obj[temArrayName] = array;
141 | that.setData(obj);
142 | }
143 |
144 | /**
145 | * 配置emojis
146 | *
147 | */
148 |
149 | function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
150 | HtmlToJson.emojisInit(reg,baseSrc,emojis);
151 | }
152 |
153 | module.exports = {
154 | wxParse: wxParse,
155 | wxParseTemArray:wxParseTemArray,
156 | emojisInit:emojisInit
157 | }
158 |
159 |
160 |
--------------------------------------------------------------------------------
/wxParse/wxParse.wxss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * author: Di (微信小程序开发工程师)
4 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
5 | * 垂直微信小程序开发交流社区
6 | *
7 | * github地址: https://github.com/icindy/wxParse
8 | *
9 | * for: 微信小程序富文本解析
10 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
11 | */
12 |
13 | .wxParse{
14 | margin: 0 5px;
15 | font-family: Helvetica,sans-serif;
16 | font-size: 28rpx;
17 | color: #666;
18 | line-height: 1.8;
19 | }
20 | view{
21 | word-break:break-all; overflow:auto;
22 | }
23 | .wxParse-inline{
24 | display: inline;
25 | margin: 0;
26 | padding: 0;
27 | }
28 | /*//标题 */
29 | .wxParse-div{margin: 0;padding: 0;}
30 | .wxParse-h1{ font-size:2em; margin: .67em 0 }
31 | .wxParse-h2{ font-size:1.5em; margin: .75em 0 }
32 | .wxParse-h3{ font-size:1.17em; margin: .83em 0 }
33 | .wxParse-h4{ margin: 1.12em 0}
34 | .wxParse-h5 { font-size:.83em; margin: 1.5em 0 }
35 | .wxParse-h6{ font-size:.75em; margin: 1.67em 0 }
36 |
37 | .wxParse-h1 {
38 | font-size: 18px;
39 | font-weight: 400;
40 | margin-bottom: .9em;
41 | }
42 | .wxParse-h2 {
43 | font-size: 16px;
44 | font-weight: 400;
45 | margin-bottom: .34em;
46 | }
47 | .wxParse-h3 {
48 | font-weight: 400;
49 | font-size: 15px;
50 | margin-bottom: .34em;
51 | }
52 | .wxParse-h4 {
53 | font-weight: 400;
54 | font-size: 14px;
55 | margin-bottom: .24em;
56 | }
57 | .wxParse-h5 {
58 | font-weight: 400;
59 | font-size: 13px;
60 | margin-bottom: .14em;
61 | }
62 | .wxParse-h6 {
63 | font-weight: 400;
64 | font-size: 12px;
65 | margin-bottom: .04em;
66 | }
67 |
68 | .wxParse-h1, .wxParse-h2, .wxParse-h3, .wxParse-h4, .wxParse-h5, .wxParse-h6, .wxParse-b, .wxParse-strong { font-weight: bolder }
69 | .wxParse-i,.wxParse-cite,.wxParse-em,.wxParse-var,.wxParse-address{font-style:italic}
70 | .wxParse-pre,.wxParse-tt,.wxParse-code,.wxParse-kbd,.wxParse-samp{font-family:monospace}
71 | .wxParse-pre{white-space:pre}
72 | .wxParse-big{font-size:1.17em}
73 | .wxParse-small,.wxParse-sub,.wxParse-sup{font-size:.83em}
74 | .wxParse-sub{vertical-align:sub}
75 | .wxParse-sup{vertical-align:super}
76 | .wxParse-s,.wxParse-strike,.wxParse-del{text-decoration:line-through}
77 | /*wxparse-自定义个性化的css样式*/
78 | /*增加video的css样式*/
79 | .wxParse-strong,.wxParse-s{display: inline}
80 | .wxParse-a{
81 | color: deepskyblue;
82 | word-break:break-all;
83 | overflow:auto;
84 | }
85 |
86 | .wxParse-video{
87 | text-align: center;
88 | margin: 10px 0;
89 | }
90 |
91 | .wxParse-video-video{
92 | width:100%;
93 | }
94 |
95 | .wxParse-img{
96 | background-color: #efefef;
97 | overflow: hidden;
98 | max-width: 670rpx;
99 | display: block;
100 | margin-top: 20rpx;
101 | }
102 |
103 | .wxParse-blockquote {
104 | margin: 0;
105 | padding:10px 0 10px 5px;
106 | font-family:Courier, Calibri,"宋体";
107 | background:#f5f5f5;
108 | border-left: 3px solid #dbdbdb;
109 | }
110 |
111 | .wxParse-code,.wxParse-wxxxcode-style{
112 | display: inline;
113 | background:#f5f5f5;
114 | }
115 | .wxParse-ul{
116 | margin: 20rpx 10rpx;
117 | }
118 |
119 | .wxParse-li,.wxParse-li-inner{
120 | display: flex;
121 | align-items: baseline;
122 | margin: 10rpx 0;
123 | }
124 | .wxParse-li-text{
125 |
126 | align-items: center;
127 | line-height: 20px;
128 | }
129 |
130 | .wxParse-li-circle{
131 | display: inline-flex;
132 | width: 5px;
133 | height: 5px;
134 | background-color: #333;
135 | margin-right: 5px;
136 | }
137 |
138 | .wxParse-li-square{
139 | display: inline-flex;
140 | width: 10rpx;
141 | height: 10rpx;
142 | background-color: #333;
143 | margin-right: 5px;
144 | }
145 | .wxParse-li-ring{
146 | display: inline-flex;
147 | width: 10rpx;
148 | height: 10rpx;
149 | border: 2rpx solid #333;
150 | border-radius: 50%;
151 | background-color: #fff;
152 | margin-right: 5px;
153 | }
154 |
155 | /*.wxParse-table{
156 | width: 100%;
157 | height: 400px;
158 | }
159 | .wxParse-thead,.wxParse-tfoot,.wxParse-tr{
160 | display: flex;
161 | flex-direction: row;
162 | }
163 | .wxParse-th,.wxParse-td{
164 | display: flex;
165 | width: 580px;
166 | overflow: auto;
167 | }*/
168 |
169 | .wxParse-u {
170 | text-decoration: underline;
171 | }
172 | .wxParse-hide{
173 | display: none;
174 | }
175 | .WxEmojiView{
176 | align-items: center;
177 | }
178 | .wxEmoji{
179 | width: 16px;
180 | height:16px;
181 | }
182 | .wxParse-tr{
183 | display: flex;
184 | border-right:1px solid #e0e0e0;
185 | border-bottom:1px solid #e0e0e0;
186 | border-top:1px solid #e0e0e0;
187 | }
188 | .wxParse-th,
189 | .wxParse-td{
190 | flex:1;
191 | padding:5px;
192 | font-size:28rpx;
193 | border-left:1px solid #e0e0e0;
194 | word-break: break-all;
195 | }
196 | .wxParse-td:last{
197 | border-top:1px solid #e0e0e0;
198 | }
199 | .wxParse-th{
200 | background:#f0f0f0;
201 | border-top:1px solid #e0e0e0;
202 | }
203 | .wxParse-del{
204 | display: inline;
205 | }
206 | .wxParse-figure {
207 | overflow: hidden;
208 | }
209 |
--------------------------------------------------------------------------------
/utils/$.js:
--------------------------------------------------------------------------------
1 |
2 | const host = "https://carsplus.17link.cc/";
3 | var firstLogin = true;
4 | // 检测微信小程序环境
5 | if (wx) {
6 | wx.$ = {};
7 | wx.$.host = host;
8 | wx.$.getRequestOptions = function (options) {
9 | let url = options.url;
10 | let header = options.header || {};
11 |
12 | if (
13 | options.url.indexOf("https://") !== 0 &&
14 | options.url.indexOf("http://") !== 0
15 | ) {
16 | if (options.url.indexOf("?") == -1) {
17 | url = `${wx.$.host}${options.url}?api_token=${wx.getStorageSync('token')}`;
18 | } else {
19 | url = `${wx.$.host}${options.url}&api_token=${wx.getStorageSync('token')}`;
20 | }
21 | } else {
22 | if (options.url.indexOf(`${wx.$.host}`) !== 0) {
23 | url = `${wx.$.host}`;
24 | header.Proxy = options.url;
25 | }
26 | }
27 |
28 | header = Object.assign(
29 | {
30 | "Content-Type": "application/json"
31 | },
32 | header
33 | );
34 |
35 | return Object.assign(options, { url, header });
36 | };
37 | wx.$.request = function (options) {
38 | return wx.request(wx.$.getRequestOptions(options));
39 | };
40 | wx.$.login = function (userInfo) {
41 | wx.showLoading({
42 | title: '登录中...'
43 | })
44 | wx.login({
45 | success: res => {
46 | const code = res.code;
47 | if (code) {
48 | const data = {
49 | code: code,
50 | encryptedData: userInfo.encryptedData,
51 | iv: userInfo.iv
52 | };
53 | wx.$.request({
54 | url: host + 'api/login',
55 | method: "POST",
56 | data: data,
57 | success: res => {
58 | if (res && res.data.api_token) {
59 | wx.setStorageSync("token", res.data.api_token);
60 | wx.setStorageSync("info", res.data.info);
61 | setTimeout(() => {
62 | wx.navigateBack()
63 | wx.hideLoading()
64 | }, 500)
65 | } else if (res.data.error === 'error' && res.data.status == 400){
66 | wx.hideLoading()
67 | wx.showModal({
68 | title: '提示',
69 | content: '当前账号权限已被禁用，如有疑问，请联系客服人员。',
70 | confirmColor: '#00A0E8',
71 | showCancel: false
72 | });
73 | } else {
74 | wx.hideLoading()
75 | wx.showModal({
76 | title: '提示',
77 | content: '登录失败',
78 | confirmColor: '#00A0E8',
79 | showCancel: false
80 | });
81 | };
82 | },
83 | fail: res => {
84 | console.error(
85 | "wx.$.login request Fail" +
86 | res.errMsg
87 | );
88 | }
89 | });
90 | fail: res => {
91 | console.error(
92 | "wx.$.login wx.getUserInfo Fail" +
93 | res.errMsg
94 | );
95 | }
96 |
97 | } else {
98 | console.error(
99 | "wx.$.login wx.login Fail" + res.errMsg
100 | );
101 | }
102 | }
103 | });
104 |
105 | };
106 | wx.$.fetch = function (url, options = {}) {
107 | options.url = url;
108 | if (!options.hideLoading) {
109 | wx.showLoading({
110 | title: '加载中',
111 | })
112 | };
113 |
114 | return new Promise((resolve, reject) => {
115 | options.success = res => {
116 | if (!options.showLoading) {
117 | wx.hideLoading()
118 | };
119 | if (res.data.msg == 'invalid login.' && firstLogin == true) {
120 | firstLogin = false;
121 | setTimeout(() => {
122 | wx.navigateTo({
123 | url: '/pages/login/login',
124 | })
125 | firstLogin = true;
126 | }, 500)
127 |
128 | } else {
129 | const myInfo = wx.getStorageSync('myInfo');
130 | if (myInfo.member_state == 1) {
131 | firstLogin == true
132 | wx.stopPullDownRefresh()
133 | resolve(res);
134 | } else if (myInfo.member_state == 2){
135 | wx.hideLoading()
136 |
137 | resolve(res);
138 | wx.stopPullDownRefresh()
139 | wx.showModal({
140 | title: '提示',
141 | content: '当前账号权限已被禁用，如有疑问，请联系客服人员。',
142 | confirmColor: '#00A0E8',
143 | showCancel: false,
144 | success(res) {
145 | if (res.confirm) {
146 | wx.removeStorageSync('token');
147 | wx.removeStorageSync('info');
148 | wx.removeStorageSync('myInfo');
149 | wx.navigateTo({
150 | url: '/pages/login/login',
151 | })
152 | firstLogin = true;
153 | }
154 | }
155 | });
156 | } else {
157 | firstLogin == true
158 | wx.stopPullDownRefresh()
159 | resolve(res);
160 | }
161 |
162 |
163 | }
164 | };
165 | options.fail = res => {
166 | wx.stopPullDownRefresh()
167 | wx.hideLoading()
168 | wx.showToast({
169 | title: '数据请求失败！请刷新页面重新请求！',
170 | icon: 'none'
171 | })
172 | reject(res);
173 | };
174 | wx.$.request(options);
175 | });
176 | };
177 | wx.$.upload = function (options) {
178 | return wx.uploadFile(wx.$.getRequestOptions(options));
179 | };
180 | module.exports = wx.$;
181 | }
182 |
--------------------------------------------------------------------------------
/wxParse/htmlparser.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
4 | *
5 | * author: Di (微信小程序开发工程师)
6 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
7 | * 垂直微信小程序开发交流社区
8 | *
9 | * github地址: https://github.com/icindy/wxParse
10 | *
11 | * for: 微信小程序富文本解析
12 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
13 | */
14 | // Regular Expressions for parsing tags and attributes
15 | var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
16 | endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
17 | attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
18 |
19 | // Empty Elements - HTML 5
20 | var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
21 |
22 | // Block Elements - HTML 5
23 | var block = makeMap("a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video");
24 |
25 | // Inline Elements - HTML 5
26 | var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");
27 |
28 | // Elements that you can, intentionally, leave open
29 | // (and which close themselves)
30 | var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
31 |
32 | // Attributes that have their values filled in disabled="disabled"
33 | var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
34 |
35 | // Special Elements (can contain anything)
36 | var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
37 |
38 | function HTMLParser(html, handler) {
39 | var index, chars, match, stack = [], last = html;
40 | stack.last = function () {
41 | return this[this.length - 1];
42 | };
43 |
44 | while (html) {
45 | chars = true;
46 |
47 | // Make sure we're not in a script or style element
48 | if (!stack.last() || !special[stack.last()]) {
49 |
50 | // Comment
51 | if (html.indexOf("");
53 |
54 | if (index >= 0) {
55 | if (handler.comment)
56 | handler.comment(html.substring(4, index));
57 | html = html.substring(index + 3);
58 | chars = false;
59 | }
60 |
61 | // end tag
62 | } else if (html.indexOf("]*>"), function (all, text) {
100 | text = text.replace(/|/g, "$1$2");
101 | if (handler.chars)
102 | handler.chars(text);
103 |
104 | return "";
105 | });
106 |
107 |
108 | parseEndTag("", stack.last());
109 | }
110 |
111 | if (html == last)
112 | throw "Parse Error: " + html;
113 | last = html;
114 | }
115 |
116 | // Clean up any remaining tags
117 | parseEndTag();
118 |
119 | function parseStartTag(tag, tagName, rest, unary) {
120 | tagName = tagName.toLowerCase();
121 |
122 | if (block[tagName]) {
123 | while (stack.last() && inline[stack.last()]) {
124 | parseEndTag("", stack.last());
125 | }
126 | }
127 |
128 | if (closeSelf[tagName] && stack.last() == tagName) {
129 | parseEndTag("", tagName);
130 | }
131 |
132 | unary = empty[tagName] || !!unary;
133 |
134 | if (!unary)
135 | stack.push(tagName);
136 |
137 | if (handler.start) {
138 | var attrs = [];
139 |
140 | rest.replace(attr, function (match, name) {
141 | var value = arguments[2] ? arguments[2] :
142 | arguments[3] ? arguments[3] :
143 | arguments[4] ? arguments[4] :
144 | fillAttrs[name] ? name : "";
145 |
146 | attrs.push({
147 | name: name,
148 | value: value,
149 | escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
150 | });
151 | });
152 |
153 | if (handler.start) {
154 | handler.start(tagName, attrs, unary);
155 | }
156 |
157 | }
158 | }
159 |
160 | function parseEndTag(tag, tagName) {
161 | // If no tag name is provided, clean shop
162 | if (!tagName)
163 | var pos = 0;
164 |
165 | // Find the closest opened tag of the same type
166 | else {
167 | tagName = tagName.toLowerCase();
168 | for (var pos = stack.length - 1; pos >= 0; pos--)
169 | if (stack[pos] == tagName)
170 | break;
171 | }
172 | if (pos >= 0) {
173 | // Close all the open elements, up the stack
174 | for (var i = stack.length - 1; i >= pos; i--)
175 | if (handler.end)
176 | handler.end(stack[i]);
177 |
178 | // Remove the open elements from the stack
179 | stack.length = pos;
180 | }
181 | }
182 | };
183 |
184 |
185 | function makeMap(str) {
186 | var obj = {}, items = str.split(",");
187 | for (var i = 0; i < items.length; i++)
188 | obj[items[i]] = true;
189 | return obj;
190 | }
191 |
192 | module.exports = HTMLParser;
193 |
--------------------------------------------------------------------------------
/wxParse/wxDiscode.js:
--------------------------------------------------------------------------------
1 | // HTML 支持的数学符号
2 | function strNumDiscode(str){
3 | str = str.replace(/∀/g, '∀');
4 | str = str.replace(/∂/g, '∂');
5 | str = str.replace(/&exists;/g, '∃');
6 | str = str.replace(/∅/g, '∅');
7 | str = str.replace(/∇/g, '∇');
8 | str = str.replace(/∈/g, '∈');
9 | str = str.replace(/∉/g, '∉');
10 | str = str.replace(/∋/g, '∋');
11 | str = str.replace(/∏/g, '∏');
12 | str = str.replace(/∑/g, '∑');
13 | str = str.replace(/−/g, '−');
14 | str = str.replace(/∗/g, '∗');
15 | str = str.replace(/√/g, '√');
16 | str = str.replace(/∝/g, '∝');
17 | str = str.replace(/∞/g, '∞');
18 | str = str.replace(/∠/g, '∠');
19 | str = str.replace(/∧/g, '∧');
20 | str = str.replace(/∨/g, '∨');
21 | str = str.replace(/∩/g, '∩');
22 | str = str.replace(/∩/g, '∪');
23 | str = str.replace(/∫/g, '∫');
24 | str = str.replace(/∴/g, '∴');
25 | str = str.replace(/∼/g, '∼');
26 | str = str.replace(/≅/g, '≅');
27 | str = str.replace(/≈/g, '≈');
28 | str = str.replace(/≠/g, '≠');
29 | str = str.replace(/≤/g, '≤');
30 | str = str.replace(/≥/g, '≥');
31 | str = str.replace(/⊂/g, '⊂');
32 | str = str.replace(/⊃/g, '⊃');
33 | str = str.replace(/⊄/g, '⊄');
34 | str = str.replace(/⊆/g, '⊆');
35 | str = str.replace(/⊇/g, '⊇');
36 | str = str.replace(/⊕/g, '⊕');
37 | str = str.replace(/⊗/g, '⊗');
38 | str = str.replace(/⊥/g, '⊥');
39 | str = str.replace(/⋅/g, '⋅');
40 | return str;
41 | }
42 |
43 | //HTML 支持的希腊字母
44 | function strGreeceDiscode(str){
45 | str = str.replace(/Α/g, 'Α');
46 | str = str.replace(/Β/g, 'Β');
47 | str = str.replace(/Γ/g, 'Γ');
48 | str = str.replace(/Δ/g, 'Δ');
49 | str = str.replace(/Ε/g, 'Ε');
50 | str = str.replace(/Ζ/g, 'Ζ');
51 | str = str.replace(/Η/g, 'Η');
52 | str = str.replace(/Θ/g, 'Θ');
53 | str = str.replace(/Ι/g, 'Ι');
54 | str = str.replace(/Κ/g, 'Κ');
55 | str = str.replace(/Λ/g, 'Λ');
56 | str = str.replace(/Μ/g, 'Μ');
57 | str = str.replace(/Ν/g, 'Ν');
58 | str = str.replace(/Ξ/g, 'Ν');
59 | str = str.replace(/Ο/g, 'Ο');
60 | str = str.replace(/Π/g, 'Π');
61 | str = str.replace(/Ρ/g, 'Ρ');
62 | str = str.replace(/Σ/g, 'Σ');
63 | str = str.replace(/Τ/g, 'Τ');
64 | str = str.replace(/Υ/g, 'Υ');
65 | str = str.replace(/Φ/g, 'Φ');
66 | str = str.replace(/Χ/g, 'Χ');
67 | str = str.replace(/Ψ/g, 'Ψ');
68 | str = str.replace(/Ω/g, 'Ω');
69 |
70 | str = str.replace(/α/g, 'α');
71 | str = str.replace(/β/g, 'β');
72 | str = str.replace(/γ/g, 'γ');
73 | str = str.replace(/δ/g, 'δ');
74 | str = str.replace(/ε/g, 'ε');
75 | str = str.replace(/ζ/g, 'ζ');
76 | str = str.replace(/η/g, 'η');
77 | str = str.replace(/θ/g, 'θ');
78 | str = str.replace(/ι/g, 'ι');
79 | str = str.replace(/κ/g, 'κ');
80 | str = str.replace(/λ/g, 'λ');
81 | str = str.replace(/μ/g, 'μ');
82 | str = str.replace(/ν/g, 'ν');
83 | str = str.replace(/ξ/g, 'ξ');
84 | str = str.replace(/ο/g, 'ο');
85 | str = str.replace(/π/g, 'π');
86 | str = str.replace(/ρ/g, 'ρ');
87 | str = str.replace(/ς/g, 'ς');
88 | str = str.replace(/σ/g, 'σ');
89 | str = str.replace(/τ/g, 'τ');
90 | str = str.replace(/υ/g, 'υ');
91 | str = str.replace(/φ/g, 'φ');
92 | str = str.replace(/χ/g, 'χ');
93 | str = str.replace(/ψ/g, 'ψ');
94 | str = str.replace(/ω/g, 'ω');
95 | str = str.replace(/ϑ/g, 'ϑ');
96 | str = str.replace(/ϒ/g, 'ϒ');
97 | str = str.replace(/ϖ/g, 'ϖ');
98 | str = str.replace(/·/g, '·');
99 | return str;
100 | }
101 |
102 | //
103 |
104 | function strcharacterDiscode(str){
105 | // 加入常用解析
106 | str = str.replace(/ /g, ' ');
107 | str = str.replace(/"/g, "'");
108 | str = str.replace(/&/g, '&');
109 | // str = str.replace(/</g, '‹');
110 | // str = str.replace(/>/g, '›');
111 |
112 | str = str.replace(/</g, '<');
113 | str = str.replace(/>/g, '>');
114 | str = str.replace(/•/g, '•');
115 |
116 | return str;
117 | }
118 |
119 | // HTML 支持的其他实体
120 | function strOtherDiscode(str){
121 | str = str.replace(/Œ/g, 'Œ');
122 | str = str.replace(/œ/g, 'œ');
123 | str = str.replace(/Š/g, 'Š');
124 | str = str.replace(/š/g, 'š');
125 | str = str.replace(/Ÿ/g, 'Ÿ');
126 | str = str.replace(/ƒ/g, 'ƒ');
127 | str = str.replace(/ˆ/g, 'ˆ');
128 | str = str.replace(/˜/g, '˜');
129 | str = str.replace(/ /g, '');
130 | str = str.replace(/ /g, '');
131 | str = str.replace(/ /g, '');
132 | str = str.replace(//g, '');
133 | str = str.replace(//g, '');
134 | str = str.replace(//g, '');
135 | str = str.replace(//g, '');
136 | str = str.replace(/–/g, '–');
137 | str = str.replace(/—/g, '—');
138 | str = str.replace(/‘/g, '‘');
139 | str = str.replace(/’/g, '’');
140 | str = str.replace(/‚/g, '‚');
141 | str = str.replace(/“/g, '“');
142 | str = str.replace(/”/g, '”');
143 | str = str.replace(/„/g, '„');
144 | str = str.replace(/†/g, '†');
145 | str = str.replace(/‡/g, '‡');
146 | str = str.replace(/•/g, '•');
147 | str = str.replace(/…/g, '…');
148 | str = str.replace(/‰/g, '‰');
149 | str = str.replace(/′/g, '′');
150 | str = str.replace(/″/g, '″');
151 | str = str.replace(/‹/g, '‹');
152 | str = str.replace(/›/g, '›');
153 | str = str.replace(/‾/g, '‾');
154 | str = str.replace(/€/g, '€');
155 | str = str.replace(/™/g, '™');
156 |
157 | str = str.replace(/←/g, '←');
158 | str = str.replace(/↑/g, '↑');
159 | str = str.replace(/→/g, '→');
160 | str = str.replace(/↓/g, '↓');
161 | str = str.replace(/↔/g, '↔');
162 | str = str.replace(/↵/g, '↵');
163 | str = str.replace(/⌈/g, '⌈');
164 | str = str.replace(/⌉/g, '⌉');
165 |
166 | str = str.replace(/⌊/g, '⌊');
167 | str = str.replace(/⌋/g, '⌋');
168 | str = str.replace(/◊/g, '◊');
169 | str = str.replace(/♠/g, '♠');
170 | str = str.replace(/♣/g, '♣');
171 | str = str.replace(/♥/g, '♥');
172 |
173 | str = str.replace(/♦/g, '♦');
174 | str = str.replace(/'/g, '\'');
175 | return str;
176 | }
177 |
178 | function strMoreDiscode(str){
179 | str = str.replace(/\r\n/g,"");
180 | str = str.replace(/\n/g,"");
181 |
182 | str = str.replace(/code/g,"wxxxcode-style");
183 | return str;
184 | }
185 |
186 | function strDiscode(str){
187 | str = strNumDiscode(str);
188 | str = strGreeceDiscode(str);
189 | str = strcharacterDiscode(str);
190 | str = strOtherDiscode(str);
191 | str = strMoreDiscode(str);
192 | return str;
193 | }
194 | function urlToHttpUrl(url,rep){
195 |
196 | var patt1 = new RegExp("^//");
197 | var result = patt1.test(url);
198 | if(result){
199 | url = rep+":"+url;
200 | }
201 | return url;
202 | }
203 |
204 | module.exports = {
205 | strDiscode:strDiscode,
206 | urlToHttpUrl:urlToHttpUrl
207 | }
--------------------------------------------------------------------------------
/pages/topicdetail/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{detail.member.name}}
9 |
10 |
15 |
16 |
17 | {{detail.post_title}}
18 | {{detail.created_at}}
19 |
20 |
21 |
22 |
23 |
24 | {{current + 1}}
25 | \ {{detail.garageImage.length}}
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 编号：{{detail.post_number}}
43 |
44 |
45 |
49 |
50 |
51 | 收藏
52 |
53 |
54 |
55 |
56 |
57 |
108 |
109 |
110 |
111 | 商务合作
112 |
113 |
114 |
115 |
116 |
117 | 分享到：
118 |
119 |
120 |
121 | 朋友圈
122 |
123 |
124 |
125 | 微信
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 长按图片保存至相册，快去分享吧！
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | @{{replayName}}:
149 |
150 | 取消
151 | 发表
152 |
153 |
154 |
155 |
156 |
157 |
158 | 是否打开授权设置？
159 |
160 | 取消
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
184 |
--------------------------------------------------------------------------------
/wxParse/html2json.js:
--------------------------------------------------------------------------------
1 | /**
2 | * html2Json 改造来自: https://github.com/Jxck/html2json
3 | *
4 | *
5 | * author: Di (微信小程序开发工程师)
6 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
7 | * 垂直微信小程序开发交流社区
8 | *
9 | * github地址: https://github.com/icindy/wxParse
10 | *
11 | * for: 微信小程序富文本解析
12 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
13 | */
14 |
15 | var __placeImgeUrlHttps = "https";
16 | var __emojisReg = '';
17 | var __emojisBaseSrc = '';
18 | var __emojis = {};
19 | var wxDiscode = require('./wxDiscode.js');
20 | var HTMLParser = require('./htmlparser.js');
21 | // Empty Elements - HTML 5
22 | var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
23 | // Block Elements - HTML 5
24 | var block = makeMap("br,a,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video");
25 |
26 | // Inline Elements - HTML 5
27 | var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");
28 |
29 | // Elements that you can, intentionally, leave open
30 | // (and which close themselves)
31 | var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
32 |
33 | // Attributes that have their values filled in disabled="disabled"
34 | var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
35 |
36 | // Special Elements (can contain anything)
37 | var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
38 | function makeMap(str) {
39 | var obj = {}, items = str.split(",");
40 | for (var i = 0; i < items.length; i++)
41 | obj[items[i]] = true;
42 | return obj;
43 | }
44 |
45 | function q(v) {
46 | return '"' + v + '"';
47 | }
48 |
49 | function removeDOCTYPE(html) {
50 | return html
51 | .replace(/<\?xml.*\?>\n/, '')
52 | .replace(/<.*!doctype.*\>\n/, '')
53 | .replace(/<.*!DOCTYPE.*\>\n/, '');
54 | }
55 |
56 | function trimHtml(html) {
57 | return html
58 | .replace(/\r?\n+/g, '')
59 | .replace(//ig, '')
60 | .replace(/\/\*.*?\*\//ig, '')
61 | .replace(/[ ]+
190 | // add to parents
191 | var parent = bufArray[0] || results;
192 | if (parent.nodes === undefined) {
193 | parent.nodes = [];
194 | }
195 | parent.nodes.push(node);
196 | } else {
197 | bufArray.unshift(node);
198 | }
199 | },
200 | end: function (tag) {
201 | //debug(tag);
202 | // merge into parent tag
203 | var node = bufArray.shift();
204 | if (node.tag !== tag) console.error('invalid state: mismatch end tag');
205 |
206 | //当有缓存source资源时于于video补上src资源
207 | if(node.tag === 'video' && results.source){
208 | node.attr.src = results.source;
209 | delete results.source;
210 | }
211 |
212 | if (bufArray.length === 0) {
213 | results.nodes.push(node);
214 | } else {
215 | var parent = bufArray[0];
216 | if (parent.nodes === undefined) {
217 | parent.nodes = [];
218 | }
219 | parent.nodes.push(node);
220 | }
221 | },
222 | chars: function (text) {
223 | //debug(text);
224 | var node = {
225 | node: 'text',
226 | text: text,
227 | textArray:transEmojiStr(text)
228 | };
229 |
230 | if (bufArray.length === 0) {
231 | node.index = index.toString()
232 | index += 1
233 | results.nodes.push(node);
234 | } else {
235 | var parent = bufArray[0];
236 | if (parent.nodes === undefined) {
237 | parent.nodes = [];
238 | }
239 | node.index = parent.index + '.' + parent.nodes.length
240 | parent.nodes.push(node);
241 | }
242 | },
243 | comment: function (text) {
244 | //debug(text);
245 | // var node = {
246 | // node: 'comment',
247 | // text: text,
248 | // };
249 | // var parent = bufArray[0];
250 | // if (parent.nodes === undefined) {
251 | // parent.nodes = [];
252 | // }
253 | // parent.nodes.push(node);
254 | },
255 | });
256 | return results;
257 | };
258 |
259 | function transEmojiStr(str){
260 | // var eReg = new RegExp("["+__reg+' '+"]");
261 | // str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
262 |
263 | var emojiObjs = [];
264 | //如果正则表达式为空
265 | if(__emojisReg.length == 0 || !__emojis){
266 | var emojiObj = {}
267 | emojiObj.node = "text";
268 | emojiObj.text = str;
269 | array = [emojiObj];
270 | return array;
271 | }
272 | //这个地方需要调整
273 | str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
274 | var eReg = new RegExp("[:]");
275 | var array = str.split(eReg);
276 | for(var i = 0; i < array.length; i++){
277 | var ele = array[i];
278 | var emojiObj = {};
279 | if(__emojis[ele]){
280 | emojiObj.node = "element";
281 | emojiObj.tag = "emoji";
282 | emojiObj.text = __emojis[ele];
283 | emojiObj.baseSrc= __emojisBaseSrc;
284 | }else{
285 | emojiObj.node = "text";
286 | emojiObj.text = ele;
287 | }
288 | emojiObjs.push(emojiObj);
289 | }
290 |
291 | return emojiObjs;
292 | }
293 |
294 | function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
295 | __emojisReg = reg;
296 | __emojisBaseSrc=baseSrc;
297 | __emojis=emojis;
298 | }
299 |
300 | module.exports = {
301 | html2json: html2json,
302 | emojisInit:emojisInit
303 | };
304 |
305 |
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | //获取应用实例
3 | const WxParse = require('../../wxParse/wxParse.js');
4 | const app = getApp()
5 | Page({
6 | data: {
7 | detail: {},
8 | showShareModal: true
9 | },
10 |
11 | onShow() {
12 | this.getData()
13 | },
14 | getData() {
15 | wx.$.fetch(`api/post/detail?id=244`).then(res => {
16 | if (res.statusCode == 200 && res.data.state == 200) {
17 | if (res.data.data.member.member_id == this.data.myId) {
18 | this.setData({
19 | myPost: true
20 | })
21 | };
22 | let data = res.data.data
23 | this.setData({
24 | detail: data
25 | })
26 | let postingContent = data.post_content;
27 | let client = data.client
28 | if (client == 1 && (!res.data.data.garageImage || res.data.data.garageImage.length == 0)) {
29 | postingContent = JSON.parse(postingContent);
30 | let content = '';
31 | postingContent.forEach(item => {
32 | if (item.content) {
33 | content = content + '' + item.content + '
'
34 | } else if (item.src) {
35 | content = content + ''
36 | } else if (item.emoji) {
37 | content = content + '
'
38 | }
39 | })
40 | if (content) {
41 | WxParse.wxParse('content', 'html', content, this, 5);
42 | }
43 | } else {
44 | WxParse.wxParse('content', 'html', postingContent, this, 5);
45 | }
46 | } else {
47 | wx.showModal({
48 | title: '提示',
49 | content: res.data.msg,
50 | showCancel: false,
51 | success: res => {
52 | if (res.confirm) {
53 | wx.navigateBack()
54 | }
55 | }
56 | })
57 | }
58 | })
59 | },
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | ///////////////////////////////////// 绘图
70 |
71 | canvasIdErrorCallback(e) {
72 | console.error(e.detail.errMsg)
73 | },
74 |
75 | createdCode() {
76 | const that = this;
77 | const detail = this.data.detail;
78 | const ctx = wx.createCanvasContext('shareFrends');
79 | const date = new Date;
80 | const year = date.getFullYear();
81 | const month = date.getMonth() + 1;
82 | const day = date.getDate();
83 | const time = year + '.' + month + '.' + day;
84 | const name = detail.post_title;
85 | const coverWidth = this.data.coverWidth;
86 | const coverHeight = this.data.coverHeight;
87 | let pichName = detail.member.name;
88 | const explain = 'Hi,我想分享给你一条资讯猛料!';
89 | const erweima = '/imgs/erweima.png'
90 | // 截取昵称 超出省略。。。
91 | if (pichName.length > 16) {
92 | pichName = pichName.slice(0, 9) + '...'
93 | };
94 | // 绘制logo
95 | ctx.save()
96 | ctx.drawImage('/imgs/canvas-bg.jpg', 0, 0, 286, 480);
97 | ctx.drawImage('/imgs/share-logo.png', 140, 25, 128, 34);
98 |
99 | // 绘制时间
100 | ctx.setFontSize(12);
101 | ctx.setTextAlign('right');
102 | const metrics = ctx.measureText(time).width;
103 | ctx.fillText(time, 266, 78, metrics + 5);
104 | // 绘制 封面图并裁剪
105 | ctx.drawImage(this.data.cover, 0, (coverHeight - 129 * coverWidth / 252) / 2, coverWidth, 129 * coverWidth / 252, 16, 94, 252, 129);
106 |
107 |
108 | // 绘制标题
109 | ctx.font = 'normal bold 14px sans-serif';
110 | ctx.setTextAlign('left');
111 | const nameWidth = ctx.measureText(name).width;
112 | // 标题换行
113 | this.wordsWrap(ctx, name, nameWidth, 252, 16, 252, 16);
114 | // 计算标题所占高度
115 | const titleHight = Math.ceil(nameWidth / 252) * 16;
116 | // 绘制头像和昵称
117 | ctx.arc(36, 268 + titleHight, 20, 0, 2 * Math.PI);
118 | ctx.clip()
119 | ctx.drawImage(this.data.avatar, 16, 248 + titleHight, 40, 44);
120 | ctx.restore();
121 | ctx.font = 'normal normal 14px sans-serif';
122 | ctx.setTextAlign('left');
123 | ctx.setFillStyle('#bbbbbb')
124 | ctx.fillText(pichName, 70, 270 + titleHight);
125 | // 二维码描述 及图片
126 | ctx.setStrokeStyle('#eeeeee');
127 | ctx.strokeRect(16, 300 + titleHight, 252, 80);
128 | ctx.setFillStyle('#333333')
129 | ctx.fillText(explain.slice(0, 11), 30, 336 + titleHight);
130 | ctx.fillText(explain.slice(11), 30, 358 + titleHight);
131 |
132 | ctx.drawImage(this.data.erweima, 194, 308 + titleHight, 44, 44);
133 | ctx.setFontSize(10);
134 | ctx.setFillStyle('#bbbbbb')
135 | ctx.fillText('长按扫码查看详情', 175, 370 + titleHight);
136 |
137 | ctx.draw()
138 |
139 |
140 | },
141 | // canvas 标题超出换行处理
142 | wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
143 | let lineWidth = 0;
144 | let lastSubStrIndex = 0;
145 | for (let i = 0; i < name.length; i++) {
146 | lineWidth += ctx.measureText(name[i]).width;
147 | if (lineWidth > maxWidth) {
148 | ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
149 | srartY += wordsHight;
150 | lineWidth = 0;
151 | lastSubStrIndex = i;
152 | }
153 | if (i == name.length - 1) {
154 | ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
155 | }
156 | }
157 | },
158 | // 将网络图片存为临时图片
159 | shareFrends() {
160 | wx.showLoading({
161 | title: '图片生成中',
162 | showShareModal: !this.data.showShareModal
163 | })
164 | let that = this;
165 | const detail = this.data.detail;
166 | let avatar;
167 | const post_cover = detail.post_cover || '../../imgs/cars.png';
168 | wx.$.fetch('api/setLocalAvatar', {
169 | method: 'post',
170 | hideLoading: true,
171 | showLoading: true,
172 | data: {
173 | api_token: wx.getStorageSync('token'),
174 | member_id: detail.member.member_id,
175 | }
176 | }).then(res => {
177 | avatar = res.data.url;
178 | wx.getImageInfo({
179 | src: avatar,
180 | success: res => {
181 | that.setData({
182 | avatar: res.path
183 | })
184 | wx.getImageInfo({
185 | src: post_cover,
186 | success: res => {
187 | if (!/^https/.test(post_cover)) {
188 | res.path = post_cover
189 | };
190 | that.setData({
191 | cover: res.path,
192 | coverWidth: res.width,
193 | coverHeight: res.height
194 | })
195 | wx.$.fetch('api/getQrCode', {
196 | method: 'post',
197 | hideLoading: true,
198 | showLoading: true,
199 | data: {
200 | path: 'pages/topicdetail/index?id=' + this.data.id,
201 | post_id: this.data.id,
202 | width: 340
203 | }
204 | }).then(res => {
205 | wx.getImageInfo({
206 | src: res.data.path,
207 | success: res => {
208 | that.setData({
209 | erweima: res.path
210 | })
211 | that.createdCode()
212 | setTimeout(() => {
213 | wx.canvasToTempFilePath({
214 | x: 0,
215 | y: 0,
216 | canvasId: 'shareFrends',
217 | success: function (res) {
218 |
219 | let shareImg = res.tempFilePath;
220 | that.setData({
221 | shareImg: shareImg
222 | })
223 | that.setData({
224 | showModal: true,
225 | showShareModal: false
226 | })
227 | wx.hideLoading()
228 | },
229 | fail: function (res) {
230 | }
231 | })
232 | }, 500)
233 | }
234 | })
235 | })
236 | },
237 | fail(err) {
238 | console.log(err)
239 | }
240 | })
241 | }
242 | })
243 | })
244 | },
245 | // canvas 生成图片
246 | saveImg() {
247 | let that = this;
248 | wx.getSetting({
249 | success(res) {
250 | if (!res.authSetting['scope.writePhotosAlbum']) {
251 | wx.authorize({
252 | scope: 'scope.writePhotosAlbum',
253 | success() {
254 | wx.saveImageToPhotosAlbum({
255 | filePath: that.data.shareImg,
256 | success() {
257 | wx.showToast({
258 | title: '保存成功'
259 | })
260 | that.addShareData(false)
261 | },
262 | fail() {
263 | wx.showToast({
264 | title: '保存失败',
265 | icon: 'none'
266 | })
267 | }
268 | })
269 | },
270 | fail() {
271 | that.setData({
272 | openSet: true
273 | })
274 | }
275 | })
276 | } else {
277 | wx.saveImageToPhotosAlbum({
278 | filePath: that.data.shareImg,
279 | success() {
280 | wx.showToast({
281 | title: '保存成功'
282 | })
283 | },
284 | fail() {
285 | wx.showToast({
286 | title: '保存失败',
287 | icon: 'none'
288 | })
289 | }
290 | })
291 | }
292 | }
293 | })
294 | },
295 |
296 |
297 | // 授权
298 | cancleSet() {
299 | this.setData({
300 | openSet: false
301 | })
302 | },
303 | hideModal() {
304 | this.setData({
305 | showModal: false,
306 | showShareModal: true
307 | })
308 | },
309 | hideShareModal() {
310 | this.setData({
311 | showShareModal: false
312 | })
313 | },
314 |
315 | addShareData(wxChate) {
316 | wx.$.fetch('api/post/sharePost?post_id=244').then(res => {
317 | if (wxChate) {
318 | // setTimeout(() => {
319 | // console.log(5555)
320 | // wx.showToast({
321 | // title: '分享成功！',
322 | // }, 800)
323 | // })
324 |
325 | }
326 | })
327 | },
328 |
329 | // 转发
330 | onShareAppMessage(options) {
331 | const detail = this.data.detail;
332 | const that = this;
333 | // 分享封面图裁剪
334 | const ctx = wx.createCanvasContext('cropperCocer');
335 | let shareCover = detail.post_cover || '../../imgs/post_cover.png';
336 | let shareImg = shareCover;
337 | wx.getImageInfo({
338 | src: shareCover,
339 | success: res => {
340 | if (!/^https/.test(shareCover)) {
341 | res.path = shareCover
342 | };
343 | ctx.drawImage(res.path, (res.width - 250 * res.height / 200) / 2, 0, 250 * res.height / 200, res.height, 0, 0, 250, 200);
344 | ctx.draw()
345 | wx.canvasToTempFilePath({
346 | x: 0,
347 | y: 0,
348 | canvasId: 'cropperCocer',
349 | success: function (res) {
350 | shareImg = res.tempFilePath;
351 | },
352 | fail: function (res) {
353 |
354 | }
355 | })
356 | }
357 | })
358 |
359 | return {
360 | title: detail.post_title,
361 | imageUrl: shareImg,
362 | success: function (res) {
363 | that.addShareData(true)
364 | },
365 | fail: function (res) {
366 |
367 | that.setData({
368 | showShareModal: true
369 | })
370 |
371 | }
372 | }
373 | }
374 |
375 |
376 |
377 | })
378 |
--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | .topic-detail-page {
2 | position: relative;
3 | }
4 |
5 | .topic-autho-info {
6 | display: flex;
7 | align-items: center;
8 | justify-content: space-between;
9 | padding: 30rpx;
10 | border-bottom: solid 1px #eeeeee;
11 | }
12 |
13 | .topic-autho-name {
14 | display: flex;
15 | align-items: center;
16 | }
17 |
18 | .topic-autho-avatar {
19 | width: 60rpx;
20 | height: 60rpx;
21 | background-color: #bbbbbb;
22 | border-radius: 50%;
23 | margin-top: 6rpx;
24 | }
25 |
26 | .user-pickname {
27 | font-size: 24rpx;
28 | color: #333333;
29 | margin-left: 25rpx;
30 | width: 400rpx;
31 | overflow: hidden;
32 | text-overflow: ellipsis;
33 | white-space: nowrap;
34 | }
35 |
36 | .attention-autho {
37 | padding: 0 24rpx;
38 | height: 54rpx;
39 | background-color: #2c2b2b;
40 | border: solid 1px #2c2b2b;
41 | color: #ffffff;
42 | font-size: 24rpx;
43 | text-align: center;
44 | line-height: 54rpx;
45 | }
46 |
47 | .attentioned-autho {
48 | display: flex;
49 | align-items: center;
50 | border: 1px solid #EBEBEB;
51 | background: #ffffff;
52 | color: #BBBBBB;
53 | }
54 |
55 | .attentioned-autho image{
56 | width: 20rpx;
57 | height: 20rpx;
58 | margin-right: 10rpx;
59 | }
60 |
61 | .topic-main-content {
62 | padding: 30rpx;
63 | }
64 |
65 | .topic-title {
66 | font-size: 46rpx;
67 | color: #333333;
68 | font-weight: 600;
69 | max-height: 160rpx;
70 | width: 690rpx;
71 | overflow: hidden;
72 | display: -webkit-box;
73 | -webkit-line-clamp: 2;
74 | -webkit-box-orient: vertical;
75 | margin: 30rpx 0;
76 | }
77 |
78 | .topic-created-time {
79 | color: #bbbbbb;
80 | font-size: 24rpx;
81 | }
82 |
83 | .topic-text {
84 | color: #333333;
85 | font-size: 30rpx;
86 | margin: 36rpx 0;
87 | word-break: break-all;
88 | }
89 |
90 | .topic-text image {
91 | width: 690rpx!important;
92 | }
93 |
94 | .topic-text .emoji-img {
95 | width: 110rpx!important;
96 | height: 110rpx!important;
97 | display: inline-block;
98 | }
99 |
100 | .topic-text video{
101 | width: 100%;
102 | margin: 30rpx 0;
103 | }
104 |
105 | .topic-image {
106 | width: 690rpx;
107 | height: 350rpx;
108 | }
109 |
110 | .topic-id {
111 | color: #bbbbbb;
112 | font-size: 24rpx;
113 | padding-top: 50rpx;
114 | }
115 |
116 | .class-swiper-num {
117 | font-size: 24rpx;
118 |
119 | height: 30rpx;
120 | }
121 |
122 | .class-swiper-num {
123 | font-size: 24rpx;
124 | color: #333333;
125 | display: flex;
126 | justify-content: flex-end;
127 | }
128 |
129 | .cars-swiper {
130 | height: 362rpx;
131 | margin: 20rpx 0 72rpx;
132 | }
133 |
134 | .swiper-wrap {
135 | width: 720rpx;
136 | margin-right: -30rpx;
137 | height: 362rpx;
138 | }
139 |
140 | .cars-swiper swiper-item {
141 | height: 362rpx;
142 | width: 680rpx;
143 | }
144 |
145 | .cars-swiper-img {
146 | height: 362rpx;
147 | width: 650rpx;
148 | }
149 |
150 | .some-shares-buttons {
151 | display: flex;
152 | /* justify-content: space-between;
153 | */
154 | justify-content: flex-end;
155 | align-items: center;
156 | margin-top: 112rpx;
157 | border-bottom: solid 1px #eeeeee;
158 | padding-bottom: 70rpx;
159 | }
160 |
161 | .some-shares-btn {
162 | display: flex;
163 | align-items: center;
164 | }
165 |
166 | .share-btn {
167 | width: 190rpx;
168 | height: 66rpx;
169 | border-radius: 33rpx;
170 | border: solid 1px #1b1b1b;
171 | font-size: 26rpx;
172 | color: #333333;
173 | display: flex;
174 | align-items: center;
175 | justify-content: space-around;
176 | background: #fff;
177 | }
178 |
179 | .share-btn image{
180 | width: 30rpx;
181 | height: 30rpx;
182 | }
183 |
184 | .share-wx {
185 | margin-left: 40rpx;
186 | }
187 |
188 | .share-wx image {
189 | width: 38rpx;
190 | height: 32rpx;
191 | }
192 |
193 | .topic-collection {
194 | display: flex;
195 | align-items: center;
196 | font-size: 26rpx;
197 | color: #333333;
198 | }
199 |
200 | .topic-collection image {
201 | width: 34rpx;
202 | height: 32rpx;
203 | margin-right: 16rpx;
204 | }
205 |
206 | .comment-list {
207 | padding: 0 30rpx 60rpx;
208 | margin-top: 30rpx;
209 | }
210 |
211 | .comment-title {
212 | color: #333333;
213 | font-size: 30rpx;
214 | font-weight: 600;
215 | margin-bottom: -30rpx;
216 | }
217 |
218 | .comment-detail {
219 | width: 576rpx;
220 | }
221 |
222 | .comment-list-item {
223 | display: flex;
224 | margin-top: 88rpx;
225 | }
226 |
227 | .looker-avatar {
228 | width: 80rpx;
229 | height: 80rpx;
230 | border-radius: 50%;
231 | margin-right: 30rpx;
232 | }
233 |
234 | .commenter-name {
235 | color: #333333;
236 | font-size: 30rpx;
237 | font-weight: 600;
238 | }
239 |
240 |
241 | .support-num-detail {
242 | font-size: 20rpx;
243 | color: #ff4646;
244 | display: flex;
245 | align-items: center;
246 | }
247 |
248 | .commenter-info {
249 | display: flex;
250 | align-items: center;
251 | justify-content: space-between;
252 | }
253 |
254 | .support-num {
255 | width: 20rpx;
256 | height: 20rpx;
257 | margin-left: 12rpx;
258 | }
259 |
260 | .comment-reply-reply {
261 | font-size: 24rpx;
262 | background-color: #f9f9f9;
263 | word-break: break-all;
264 | }
265 |
266 | .reply-reply-view {
267 | display: flex;
268 | justify-content: flex-end;
269 | }
270 |
271 | .reply-reply-icon {
272 | width: 28rpx;
273 | height: 28rpx;
274 | }
275 |
276 | .comment-reply-icon {
277 | width: 24rpx;
278 | height: 24rpx;
279 | margin-top: 4rpx;
280 | margin-right: 10rpx;
281 | }
282 |
283 | .send-time {
284 | font-size: 20rpx;
285 | color: #bbbbbb;
286 | }
287 |
288 | .comment-content {
289 | color: #333333;
290 | font-size: 26rpx;
291 | }
292 |
293 | .deleted-comment {
294 | display: flex;
295 | justify-content: flex-end;
296 | }
297 |
298 | .deleted-comment image {
299 | width: 30rpx;
300 | height: 30rpx;
301 | }
302 |
303 | .reply-fold {
304 | display: -webkit-box;
305 | -webkit-line-clamp: 4;
306 | -webkit-box-orient: vertical;
307 | overflow: hidden;
308 | }
309 |
310 | .show-all {
311 | display: flex;
312 | align-items: center;
313 | color: #C5C5C5;
314 | font-size: 24rpx;
315 | margin-top: 12rpx;
316 | }
317 |
318 | .show-all image {
319 | width: 20rpx;
320 | height: 20rpx;
321 | margin-left: 20rpx;
322 | }
323 |
324 | .look-next-comment {
325 | display: flex;
326 | align-items: center;
327 | font-size: 24rpx;
328 | color: #bbbbbb;
329 | margin: 30rpx 0 0 108rpx;
330 | }
331 |
332 | .next-comment {
333 | width: 18rpx;
334 | height: 16rpx;
335 | margin-left: 14rpx;
336 | }
337 |
338 | .business-partnership {
339 | position: fixed;
340 | width: 126rpx;
341 | height: 52rpx;
342 | background-color: #5783c1;
343 | border-radius: 26rpx 0 0 26rpx;
344 | opacity: 0.9;
345 | font-size: 24rpx;
346 | color: #ffffff;
347 | right: 0;
348 | bottom: 140rpx;
349 | text-align: center;
350 | line-height: 52rpx;
351 | }
352 |
353 | .comment-reply {
354 | height: 100rpx;
355 | width: 100%;
356 | background-color: #ffffff;
357 | box-shadow: 0px -2rpx 13rpx 0px
358 | rgba(0, 0, 0, 0.08);
359 | position: fixed;
360 | bottom: 0;
361 | left: 0;
362 | z-index: 10000;
363 | }
364 |
365 | .bottom-items {
366 | padding: 20rpx 30rpx;
367 | display: flex;
368 | align-items: center;
369 | justify-content: space-between;
370 | }
371 |
372 | .comment-input {
373 | width: 344rpx;
374 | height: 60rpx;
375 | background-color: #ffffff;
376 | border: solid 1px #e5e5e5;
377 | padding-left: 20rpx;
378 | line-height: 60rpx;
379 | }
380 |
381 | .comment-input input {
382 | width: 100%;
383 | height: 100%;
384 | font-size: 24rpx;
385 | }
386 |
387 | .bottom-support {
388 | width: 36rpx;
389 | height: 36rpx;
390 | }
391 |
392 | .bottom-item-detail {
393 | position: relative;
394 | }
395 |
396 | .bottom-item-num {
397 | position: absolute;
398 | font-size: 20rpx;
399 | color: #2c2b2b;
400 | top: -10rpx;
401 | right: -64rpx;
402 | width: 60rpx;
403 | }
404 |
405 | /* 车库 */
406 | .cars-swpier-num {
407 | display: flex;
408 | justify-content: flex-end;
409 | color: #333333;
410 | font-size: 24rpx;
411 | }
412 |
413 | .share-modal-bg {
414 | position: fixed;
415 | width: 100%;
416 | height: 100%;
417 | top: 0;
418 | left: 0;
419 | background: rgba(0, 0, 0, 0.5)
420 | }
421 |
422 | .canvas-wrap {
423 | position: absolute;
424 | width: 572rpx;
425 | height: 940rpx;
426 | background-color: #ffffff;
427 | box-shadow: 0px 0px 35rpx 0px
428 | rgba(0, 0, 0, 0.36);
429 | left: 0;
430 | top: 0;
431 | bottom: 0;
432 | right: 0;
433 | margin: auto;
434 | }
435 |
436 | .share-img {
437 | width: 572rpx;
438 | height: 850rpx;
439 | }
440 |
441 | .share-img-tips {
442 | color: #bbbbbb;
443 | text-align: center;
444 | font-size: 28rpx;
445 | height: 100rpx;
446 | background: #f7f7f7;
447 | line-height: 100rpx;
448 | }
449 |
450 | .wxParse-p image {
451 | width: 690rpx!important;
452 | }
453 |
454 | .bottom-share-modal {
455 | position: fixed;
456 | height: 100%;
457 | width: 100%;
458 | /* background: rgba(0, 0, 0, .5); */
459 | left: 0;
460 | bottom: 0;
461 | z-index: 99;
462 | }
463 |
464 | .share-detail {
465 | background: #fff;
466 | height: 320rpx;
467 | position: absolute;
468 | left: 0;
469 | width: 100%;
470 | font-size: 28rpx;
471 | color: #6666;
472 | bottom: 0;
473 | z-index: 100;
474 | }
475 |
476 | .share-items {
477 | display: flex;
478 | align-items: center;
479 | justify-content: space-around;
480 | text-align: center;
481 | width: 480rpx;
482 | margin: 46rpx auto;
483 | }
484 |
485 | .share-tips {
486 | font-size: 30rpx;
487 | margin: 40rpx 40rpx 20rpx;
488 | }
489 |
490 | .share-detail image {
491 | width: 60rpx;
492 | height: 60rpx;
493 | }
494 |
495 | .share-text {
496 | margin-top: 15rpx;
497 | }
498 |
499 | .share-detail .wx-image {
500 | width: 60rpx;
501 | height: 60rpx;
502 | margin-top: -4rpx;
503 | }
504 |
505 | .share-detail button::after {
506 | border: 0;
507 | }
508 |
509 | .share-detail button {
510 | background: #fff;
511 | padding: 0;
512 | line-height: 0;
513 | }
514 |
515 | .reply-input {
516 | width: 750rpx;
517 | position: fixed;
518 | display: flex;
519 | align-items: center;
520 | height: 90rpx;
521 | justify-content: space-between;
522 | bottom: 0;
523 | left: 0;
524 | background: #fff;
525 | }
526 |
527 | .reply-input input {
528 | width: 100%;
529 | height: 100%;
530 | }
531 |
532 | .opreat-btn {
533 | display: flex;
534 | font-size: 26rpx;
535 |
536 | }
537 |
538 | .input-text {
539 | border: 1px solid #eee;
540 | border-radius: 20rpx;
541 | margin-left: 30rpx;
542 | padding: 0 10rpx;
543 | width: 400rpx;
544 | height: 60rpx;
545 | font-size: 26rpx;
546 | display: flex;
547 | align-items: center;
548 | }
549 |
550 | .input-text input{
551 | width: 100%;
552 | }
553 |
554 | .reply-to-name {
555 | white-space: nowrap;
556 | color: #5784BB;
557 | padding-right: 10rpx;
558 | }
559 |
560 | .opreat-btn > view {
561 | padding: 10rpx 28rpx;
562 | border: 1px solid #000;
563 | border-radius: 40rpx;
564 | margin-right: 30rpx;
565 | }
566 |
567 | .opreat-btn > view:nth-child(2) {
568 | background: #000;
569 | color: #fff;
570 | }
571 |
572 | .open-seting-bg {
573 | position: fixed;
574 | width: 100%;
575 | height: 100%;
576 | top: 0;
577 | left: 0;
578 | background: rgba(0, 0, 0, 0.5);
579 | }
580 |
581 | .btn-openset {
582 | display: flex;
583 | justify-content: space-around;
584 | font-size: 30rpx;
585 | margin-top: 60rpx;
586 | }
587 |
588 | .set-title {
589 | font-size: 30rpx;
590 | margin-top: 40rpx;
591 | }
592 |
593 | .open-set-inner {
594 | width: 400rpx;
595 | height: 220rpx;
596 | position: absolute;
597 | top: 0;
598 | left: 0;
599 | bottom: 0;
600 | right: 0;
601 | margin: auto;
602 | background: #ffffff;
603 | padding: 30rpx;
604 | }
605 |
606 | .btn-openset > view:nth-child(1) {
607 | color: #919191;
608 | }
609 |
610 | .button-style {
611 | width: 100%;
612 | height: 100%;
613 | background: #fff;
614 | display: flex;
615 | align-items: center;
616 | justify-content: space-between;
617 | padding: 0 0 0;
618 | font-size: 30rpx;
619 | line-height: 0;
620 | color: red;
621 | }
622 |
623 | button::after {
624 | border: 0;
625 | }
626 |
--------------------------------------------------------------------------------
/pages/topicdetail/index.wxss:
--------------------------------------------------------------------------------
1 | .topic-detail-page {
2 | position: relative;
3 | padding-bottom: 100rpx;
4 | }
5 |
6 | .topic-autho-info {
7 | display: flex;
8 | align-items: center;
9 | justify-content: space-between;
10 | padding: 30rpx;
11 | border-bottom: solid 1px #eeeeee;
12 | }
13 |
14 | .topic-autho-name {
15 | display: flex;
16 | align-items: center;
17 | }
18 |
19 | .topic-autho-avatar {
20 | width: 60rpx;
21 | height: 60rpx;
22 | background-color: #bbbbbb;
23 | border-radius: 50%;
24 | margin-top: 6rpx;
25 | }
26 |
27 | .user-pickname {
28 | font-size: 24rpx;
29 | color: #333333;
30 | margin-left: 25rpx;
31 | width: 400rpx;
32 | overflow: hidden;
33 | text-overflow: ellipsis;
34 | white-space: nowrap;
35 | }
36 |
37 | .attention-autho {
38 | padding: 0 24rpx;
39 | height: 54rpx;
40 | background-color: #2c2b2b;
41 | border: solid 1px #2c2b2b;
42 | color: #ffffff;
43 | font-size: 24rpx;
44 | text-align: center;
45 | line-height: 54rpx;
46 | }
47 |
48 | .attentioned-autho {
49 | display: flex;
50 | align-items: center;
51 | border: 1px solid #EBEBEB;
52 | background: #ffffff;
53 | color: #BBBBBB;
54 | }
55 |
56 | .attentioned-autho image{
57 | width: 20rpx;
58 | height: 20rpx;
59 | margin-right: 10rpx;
60 | }
61 |
62 | .topic-main-content {
63 | padding: 30rpx;
64 | }
65 |
66 | .topic-title {
67 | font-size: 46rpx;
68 | color: #333333;
69 | font-weight: 600;
70 | max-height: 160rpx;
71 | width: 690rpx;
72 | overflow: hidden;
73 | display: -webkit-box;
74 | -webkit-line-clamp: 2;
75 | -webkit-box-orient: vertical;
76 | margin: 30rpx 0;
77 | }
78 |
79 | .topic-created-time {
80 | color: #bbbbbb;
81 | font-size: 24rpx;
82 | }
83 |
84 | .topic-text {
85 | color: #333333;
86 | font-size: 30rpx;
87 | margin: 36rpx 0;
88 | word-break: break-all;
89 | }
90 |
91 | .topic-text image {
92 | width: 690rpx!important;
93 | }
94 |
95 | .topic-text .emoji-img {
96 | width: 110rpx!important;
97 | height: 110rpx!important;
98 | display: inline-block;
99 | }
100 |
101 | .topic-text video{
102 | width: 100%;
103 | margin: 30rpx 0;
104 | }
105 |
106 | .topic-image {
107 | width: 690rpx;
108 | height: 350rpx;
109 | }
110 |
111 | .topic-id {
112 | color: #bbbbbb;
113 | font-size: 24rpx;
114 | padding-top: 50rpx;
115 | }
116 |
117 | .class-swiper-num {
118 | font-size: 24rpx;
119 |
120 | height: 30rpx;
121 | }
122 |
123 | .class-swiper-num {
124 | font-size: 24rpx;
125 | color: #333333;
126 | display: flex;
127 | justify-content: flex-end;
128 | }
129 |
130 | .cars-swiper {
131 | height: 362rpx;
132 | margin: 20rpx 0 72rpx;
133 | }
134 |
135 | .swiper-wrap {
136 | width: 720rpx;
137 | margin-right: -30rpx;
138 | height: 362rpx;
139 | }
140 |
141 | .cars-swiper swiper-item {
142 | height: 362rpx;
143 | width: 680rpx;
144 | }
145 |
146 | .cars-swiper-img {
147 | height: 362rpx;
148 | width: 650rpx;
149 | }
150 |
151 | .some-shares-buttons {
152 | display: flex;
153 | /* justify-content: space-between;
154 | */
155 | justify-content: flex-end;
156 | align-items: center;
157 | margin-top: 112rpx;
158 | border-bottom: solid 1px #eeeeee;
159 | padding-bottom: 70rpx;
160 | }
161 |
162 | .some-shares-btn {
163 | display: flex;
164 | align-items: center;
165 | }
166 |
167 | .share-btn {
168 | width: 190rpx;
169 | height: 66rpx;
170 | border-radius: 33rpx;
171 | border: solid 1px #1b1b1b;
172 | font-size: 26rpx;
173 | color: #333333;
174 | display: flex;
175 | align-items: center;
176 | justify-content: space-around;
177 | background: #fff;
178 | }
179 |
180 | .share-btn image{
181 | width: 30rpx;
182 | height: 30rpx;
183 | }
184 |
185 | .share-wx {
186 | margin-left: 40rpx;
187 | }
188 |
189 | .share-wx image {
190 | width: 38rpx;
191 | height: 32rpx;
192 | }
193 |
194 | .topic-collection {
195 | display: flex;
196 | align-items: center;
197 | font-size: 26rpx;
198 | color: #333333;
199 | }
200 |
201 | .topic-collection image {
202 | width: 34rpx;
203 | height: 32rpx;
204 | margin-right: 16rpx;
205 | }
206 |
207 | .comment-list {
208 | padding: 0 30rpx 60rpx;
209 | margin-top: 30rpx;
210 | }
211 |
212 | .comment-title {
213 | color: #333333;
214 | font-size: 30rpx;
215 | font-weight: 600;
216 | margin-bottom: -30rpx;
217 | }
218 |
219 | .comment-detail {
220 | width: 576rpx;
221 | }
222 |
223 | .comment-list-item {
224 | display: flex;
225 | margin-top: 88rpx;
226 | }
227 |
228 | .looker-avatar {
229 | width: 80rpx;
230 | height: 80rpx;
231 | border-radius: 50%;
232 | margin-right: 30rpx;
233 | }
234 |
235 | .commenter-name {
236 | color: #333333;
237 | font-size: 30rpx;
238 | font-weight: 600;
239 | }
240 |
241 |
242 | .support-num-detail {
243 | font-size: 20rpx;
244 | color: #ff4646;
245 | display: flex;
246 | align-items: center;
247 | }
248 |
249 | .commenter-info {
250 | display: flex;
251 | align-items: center;
252 | justify-content: space-between;
253 | }
254 |
255 | .support-num {
256 | width: 20rpx;
257 | height: 20rpx;
258 | margin-left: 12rpx;
259 | }
260 |
261 | .comment-reply-reply {
262 | font-size: 24rpx;
263 | background-color: #f9f9f9;
264 | word-break: break-all;
265 | }
266 |
267 | .reply-reply-view {
268 | display: flex;
269 | justify-content: flex-end;
270 | }
271 |
272 | .reply-reply-icon {
273 | width: 28rpx;
274 | height: 28rpx;
275 | }
276 |
277 | .comment-reply-icon {
278 | width: 24rpx;
279 | height: 24rpx;
280 | margin-top: 4rpx;
281 | margin-right: 10rpx;
282 | }
283 |
284 | .send-time {
285 | font-size: 20rpx;
286 | color: #bbbbbb;
287 | }
288 |
289 | .comment-content {
290 | color: #333333;
291 | font-size: 26rpx;
292 | }
293 |
294 | .deleted-comment {
295 | display: flex;
296 | justify-content: flex-end;
297 | }
298 |
299 | .deleted-comment image {
300 | width: 30rpx;
301 | height: 30rpx;
302 | }
303 |
304 | .reply-fold {
305 | display: -webkit-box;
306 | -webkit-line-clamp: 4;
307 | -webkit-box-orient: vertical;
308 | overflow: hidden;
309 | }
310 |
311 | .show-all {
312 | display: flex;
313 | align-items: center;
314 | color: #C5C5C5;
315 | font-size: 24rpx;
316 | margin-top: 12rpx;
317 | }
318 |
319 | .show-all image {
320 | width: 20rpx;
321 | height: 20rpx;
322 | margin-left: 20rpx;
323 | }
324 |
325 | .look-next-comment {
326 | display: flex;
327 | align-items: center;
328 | font-size: 24rpx;
329 | color: #bbbbbb;
330 | margin: 30rpx 0 0 108rpx;
331 | }
332 |
333 | .next-comment {
334 | width: 18rpx;
335 | height: 16rpx;
336 | margin-left: 14rpx;
337 | }
338 |
339 | .business-partnership {
340 | position: fixed;
341 | width: 126rpx;
342 | height: 52rpx;
343 | background-color: #5783c1;
344 | border-radius: 26rpx 0 0 26rpx;
345 | opacity: 0.9;
346 | font-size: 24rpx;
347 | color: #ffffff;
348 | right: 0;
349 | bottom: 140rpx;
350 | text-align: center;
351 | line-height: 52rpx;
352 | }
353 |
354 | .comment-reply {
355 | height: 100rpx;
356 | width: 100%;
357 | background-color: #ffffff;
358 | box-shadow: 0px -2rpx 13rpx 0px
359 | rgba(0, 0, 0, 0.08);
360 | position: fixed;
361 | bottom: 0;
362 | left: 0;
363 | z-index: 10000;
364 | }
365 |
366 | .bottom-items {
367 | padding: 20rpx 30rpx;
368 | display: flex;
369 | align-items: center;
370 | justify-content: space-between;
371 | }
372 |
373 | .comment-input {
374 | width: 344rpx;
375 | height: 60rpx;
376 | background-color: #ffffff;
377 | border: solid 1px #e5e5e5;
378 | padding-left: 20rpx;
379 | line-height: 60rpx;
380 | }
381 |
382 | .comment-input input {
383 | width: 100%;
384 | height: 100%;
385 | font-size: 24rpx;
386 | }
387 |
388 | .bottom-support {
389 | width: 36rpx;
390 | height: 36rpx;
391 | }
392 |
393 | .bottom-item-detail {
394 | position: relative;
395 | }
396 |
397 | .bottom-item-num {
398 | position: absolute;
399 | font-size: 20rpx;
400 | color: #2c2b2b;
401 | top: -10rpx;
402 | right: -64rpx;
403 | width: 60rpx;
404 | }
405 |
406 | /* 车库 */
407 | .cars-swpier-num {
408 | display: flex;
409 | justify-content: flex-end;
410 | color: #333333;
411 | font-size: 24rpx;
412 | }
413 |
414 | .share-modal-bg {
415 | position: fixed;
416 | width: 100%;
417 | height: 100%;
418 | top: 0;
419 | left: 0;
420 | background: rgba(0, 0, 0, 0.5)
421 | }
422 |
423 | .canvas-wrap {
424 | position: absolute;
425 | width: 572rpx;
426 | height: 940rpx;
427 | background-color: #ffffff;
428 | box-shadow: 0px 0px 35rpx 0px
429 | rgba(0, 0, 0, 0.36);
430 | left: 0;
431 | top: 0;
432 | bottom: 0;
433 | right: 0;
434 | margin: auto;
435 | }
436 |
437 | .share-img {
438 | width: 572rpx;
439 | height: 850rpx;
440 | }
441 |
442 | .share-img-tips {
443 | color: #bbbbbb;
444 | text-align: center;
445 | font-size: 28rpx;
446 | height: 100rpx;
447 | background: #f7f7f7;
448 | line-height: 100rpx;
449 | }
450 |
451 | .wxParse-p image {
452 | width: 690rpx!important;
453 | }
454 |
455 | .bottom-share-modal {
456 | position: fixed;
457 | height: 100%;
458 | width: 100%;
459 | /* background: rgba(0, 0, 0, .5); */
460 | left: 0;
461 | bottom: 94rpx;
462 | z-index: 99;
463 | }
464 |
465 | .share-detail {
466 | background: #fff;
467 | height: 320rpx;
468 | position: absolute;
469 | left: 0;
470 | width: 100%;
471 | font-size: 28rpx;
472 | color: #6666;
473 | bottom: 0;
474 | z-index: 100;
475 | }
476 |
477 | .share-items {
478 | display: flex;
479 | align-items: center;
480 | justify-content: space-around;
481 | text-align: center;
482 | width: 480rpx;
483 | margin: 46rpx auto;
484 | }
485 |
486 | .share-tips {
487 | font-size: 30rpx;
488 | margin: 40rpx 40rpx 20rpx;
489 | }
490 |
491 | .share-detail image {
492 | width: 60rpx;
493 | height: 60rpx;
494 | }
495 |
496 | .share-text {
497 | margin-top: 15rpx;
498 | }
499 |
500 | .share-detail .wx-image {
501 | width: 60rpx;
502 | height: 60rpx;
503 | margin-top: -4rpx;
504 | }
505 |
506 | .share-detail button::after {
507 | border: 0;
508 | }
509 |
510 | .share-detail button {
511 | background: #fff;
512 | padding: 0;
513 | line-height: 0;
514 | }
515 |
516 | .reply-input {
517 | width: 750rpx;
518 | position: fixed;
519 | display: flex;
520 | align-items: center;
521 | height: 90rpx;
522 | justify-content: space-between;
523 | bottom: 0;
524 | left: 0;
525 | background: #fff;
526 | }
527 |
528 | .reply-input input {
529 | width: 100%;
530 | height: 100%;
531 | }
532 |
533 | .opreat-btn {
534 | display: flex;
535 | font-size: 26rpx;
536 |
537 | }
538 |
539 | .input-text {
540 | border: 1px solid #eee;
541 | border-radius: 20rpx;
542 | margin-left: 30rpx;
543 | padding: 0 10rpx;
544 | width: 400rpx;
545 | height: 60rpx;
546 | font-size: 26rpx;
547 | display: flex;
548 | align-items: center;
549 | }
550 |
551 | .input-text input{
552 | width: 100%;
553 | }
554 |
555 | .reply-to-name {
556 | white-space: nowrap;
557 | color: #5784BB;
558 | padding-right: 10rpx;
559 | }
560 |
561 | .opreat-btn > view {
562 | padding: 10rpx 28rpx;
563 | border: 1px solid #000;
564 | border-radius: 40rpx;
565 | margin-right: 30rpx;
566 | }
567 |
568 | .opreat-btn > view:nth-child(2) {
569 | background: #000;
570 | color: #fff;
571 | }
572 |
573 | .open-seting-bg {
574 | position: fixed;
575 | width: 100%;
576 | height: 100%;
577 | top: 0;
578 | left: 0;
579 | background: rgba(0, 0, 0, 0.5);
580 | }
581 |
582 | .btn-openset {
583 | display: flex;
584 | justify-content: space-around;
585 | font-size: 30rpx;
586 | margin-top: 60rpx;
587 | }
588 |
589 | .set-title {
590 | font-size: 30rpx;
591 | margin-top: 40rpx;
592 | }
593 |
594 | .open-set-inner {
595 | width: 400rpx;
596 | height: 220rpx;
597 | position: absolute;
598 | top: 0;
599 | left: 0;
600 | bottom: 0;
601 | right: 0;
602 | margin: auto;
603 | background: #ffffff;
604 | padding: 30rpx;
605 | }
606 |
607 | .btn-openset > view:nth-child(1) {
608 | color: #919191;
609 | }
610 |
611 | .button-style {
612 | width: 100%;
613 | height: 100%;
614 | background: #fff;
615 | display: flex;
616 | align-items: center;
617 | justify-content: space-between;
618 | padding: 0 0 0;
619 | font-size: 30rpx;
620 | line-height: 0;
621 | color: red;
622 | }
623 |
624 | button::after {
625 | border: 0;
626 | }
627 |
--------------------------------------------------------------------------------
/pages/topicdetail/index.js:
--------------------------------------------------------------------------------
1 | var WxParse = require('../../wxParse/wxParse.js');
2 |
3 | Page({
4 |
5 |
6 | data: {
7 | detail: {},
8 | comments: [],
9 | page: 1,
10 | showShareModal: false,
11 | replyInput: false,
12 | replyText: '',
13 | commentText: '',
14 | current: 0,
15 | showAll: false,
16 | openSet: false
17 | },
18 | onLoad(options) {
19 | if (options.id) {
20 | this.setData({
21 | id: options.id,
22 | })
23 | };
24 |
25 | },
26 |
27 | onShow() {
28 | const myInfo = wx.getStorageSync('info');
29 | const myInfo2 = wx.getStorageSync('myInfo');
30 | const id = this.data.id;
31 | if (myInfo) {
32 | this.setData({
33 | myId: myInfo.member_id
34 | })
35 | };
36 | this.setData({
37 | myInfo2: myInfo2
38 | })
39 | this.setData({
40 | page: 1,
41 | comments: []
42 | })
43 | this.getData()
44 | this.getComment()
45 | },
46 |
47 | previewImg(e) {
48 | const url = e.currentTarget.dataset.url;
49 | let taht = this;
50 | wx.previewImage({
51 | current: url,
52 | urls: [url]
53 | })
54 | },
55 |
56 |
57 | // 授权
58 | cancleSet() {
59 | this.setData({
60 | openSet: false
61 | })
62 | },
63 |
64 | getData() {
65 | wx.$.fetch(`api/post/detail?id=${this.data.id}`,{hideLoading:true}).then(res => {
66 | if (res.statusCode == 200 && res.data.state == 200){
67 | if (res.data.data.member.member_id == this.data.myId) {
68 | this.setData({
69 | myPost: true
70 | })
71 | };
72 | let data = res.data.data
73 | this.setData({
74 | detail: data
75 | })
76 | let postingContent = data.post_content;
77 | let client = data.client
78 | if (client == 1 && (!res.data.data.garageImage || res.data.data.garageImage.length == 0)) {
79 | postingContent = JSON.parse(postingContent);
80 | let content = '';
81 | postingContent.forEach(item => {
82 | if (item.content) {
83 | content = content + '' + item.content + '
'
84 | } else if (item.src) {
85 | content = content + ''
86 | } else if (item.emoji) {
87 | content = content + ''
88 | }
89 | })
90 | if (content) {
91 | WxParse.wxParse('content', 'html', content, this, 5);
92 | }
93 | } else {
94 | WxParse.wxParse('content', 'html', postingContent, this, 5);
95 | }
96 | } else {
97 | wx.showModal({
98 | title: '提示',
99 | content: res.data.msg,
100 | showCancel: false,
101 | success: res => {
102 | if (res.confirm) {
103 | wx.navigateBack()
104 | }
105 | }
106 | })
107 | }
108 | })
109 | },
110 |
111 | // 评论列表
112 | getComment() {
113 | wx.$.fetch(`api/comment/list?post_id=${this.data.id}&page=${this.data.page}`,{hideLoading:true}).then(res => {
114 | if (res.statusCode) {
115 | let data = res.data.data;
116 | let comments = this.data.comments
117 | if (data.length > 0) {
118 | comments = comments.concat(data)
119 | this.setData({
120 | comments: comments,
121 | })
122 | };
123 | }
124 | })
125 | },
126 | cancleInput() {
127 | this.setData({
128 | replyInput: false
129 | })
130 | },
131 | showAll(e) {
132 | this.setData({
133 | showAll: !this.data.showAll
134 | })
135 | },
136 | // 评论点赞
137 | suportComment(e) {
138 | const id = e.currentTarget.dataset.id;
139 | const index = e.currentTarget.dataset.index;
140 | let comments = this.data.comments;
141 | wx.$.fetch('api/comment/upvote', {
142 | hideLoading: true,
143 | method: 'post',
144 | data: {
145 | api_token: wx.getStorageSync('token'),
146 | comment_id: id
147 | }
148 | }).then(res => {
149 | if (res.data.state) {
150 | comments.forEach((item, itemIndex) => {
151 | if (index == itemIndex) {
152 | item.upvote_num = item.upvote_num + 1;
153 | item.my_upvote_num = item.my_upvote_num + 1
154 | }
155 | })
156 | this.setData({
157 | comments: comments
158 | })
159 | }
160 | })
161 | },
162 |
163 | // 提交评论
164 | submitComment(e) {
165 | if (this.data.myInfo2.evaluate_permission == 1) {
166 | const comment = e.detail.value;
167 | if (comment.trim()) {
168 | wx.$.fetch('api/comment/add', {
169 | hideLoading: true,
170 | method: 'post',
171 | data: {
172 | post_id: this.data.id,
173 | content: comment,
174 | api_token: wx.getStorageSync('token')
175 | }
176 | }).then(res => {
177 | if (res.statusCode == 200 && res.data.state == 200) {
178 | wx.showToast({
179 | title: res.data.msg,
180 | })
181 | this.setData({
182 | commentText: '',
183 | page: 1,
184 | comments: []
185 | })
186 | this.getComment()
187 |
188 |
189 | } else if (res.statusCode == 200 && res.data.state == 400) {
190 | wx.showToast({
191 | title: res.data.msg,
192 | icon: 'none'
193 | })
194 | };
195 | setTimeout(() => {
196 | this.getData()
197 | }, 500)
198 |
199 | })
200 | }
201 | } else {
202 | wx.showModal({
203 | title: '提示',
204 | content: '您已经被禁止评论，如有疑问请联系客服！',
205 | showCancel: false,
206 | success: function(res) {},
207 | })
208 | }
209 | },
210 |
211 | // 关注
212 | focusUser(e) {
213 | const id = e.currentTarget.dataset.id;
214 | wx.$.fetch('api/addFocus', {
215 | hideLoading: true,
216 | method: 'post',
217 | data: {
218 | api_token: wx.getStorageSync('token'),
219 | member_id: id
220 | }
221 | }).then(res => {
222 | if (res.statusCode == 200 && res.data.state == 200) {
223 | this.getData()
224 | setTimeout(() => {
225 | wx.showToast({
226 | title: res.data.msg,
227 | })
228 | }, 100)
229 | }
230 | })
231 | },
232 |
233 | // 取关
234 | cancleFocus(e) {
235 | const id = e.currentTarget.dataset.id;
236 | wx.$.fetch('api/disFocus', {
237 | hideLoading: true,
238 | method: 'post',
239 | data: {
240 | api_token: wx.getStorageSync('token'),
241 | member_id: id,
242 | }
243 | }).then(res => {
244 | if (res.statusCode == 200 && res.data.state == 200) {
245 | this.getData()
246 | setTimeout(() => {
247 | wx.showToast({
248 | title: res.data.msg,
249 | })
250 | }, 100)
251 | }
252 | })
253 | },
254 |
255 | // 收藏
256 | collectPost() {
257 | wx.$.fetch('api/addCollect', {
258 | hideLoading: true,
259 | method: 'post',
260 | data: {
261 | post_id: this.data.id,
262 | api_token: wx.getStorageSync('token')
263 | }
264 | }).then(res => {
265 | if (res.statusCode == 200 && res.data.state == 200) {
266 | this.getData()
267 | setTimeout(() => {
268 | wx.showToast({
269 | title: res.data.msg,
270 | })
271 | })
272 | }
273 | })
274 | },
275 |
276 | // 取消收藏
277 | cancleCollect() {
278 | wx.$.fetch('api/cancelCollect', {
279 | hideLoading: true,
280 | method: 'post',
281 | data: {
282 | post_id: this.data.id,
283 | api_token: wx.getStorageSync('token')
284 | }
285 | }).then(res => {
286 | if (res.statusCode == 200 && res.data.state == 200) {
287 | this.getData()
288 | setTimeout(() => {
289 | wx.showToast({
290 | title: res.data.msg,
291 | })
292 | })
293 | }
294 | })
295 | },
296 |
297 | // 点赞
298 | upvote() {
299 | wx.$.fetch('api/addUpvote', {
300 | method: 'post',
301 | hideLoading: true,
302 | data: {
303 | post_id: this.data.id,
304 | api_token: wx.getStorageSync('token')
305 | }
306 | }).then(res => {
307 | if (res.statusCode == 200 && res.data.state == 200) {
308 | this.getData()
309 | }
310 | })
311 | },
312 |
313 | // 取消点赞
314 | unUpovte() {
315 | wx.$.fetch('api/cancelUpvote', {
316 | method: 'post',
317 | hideLoading: true,
318 | data: {
319 | post_id: this.data.id,
320 | api_token: wx.getStorageSync('token')
321 | }
322 | }).then(res => {
323 | if (res.statusCode == 200 && res.data.state == 200) {
324 | this.getData()
325 | }
326 | })
327 | },
328 | // 商务合作
329 | partnership() {
330 | wx.navigateTo({
331 | url: '/pages/cooperation/index',
332 | })
333 | },
334 |
335 | // 点击头像 跳转到个人主页
336 | linkUser(e) {
337 | const id = e.currentTarget.dataset.id;
338 | wx.navigateTo({
339 | url: '/pages/userHomePage/index?id=' + id,
340 | })
341 | },
342 |
343 | // 回复
344 | reply(e) {
345 | const id = e.currentTarget.dataset.id;
346 | const comment = e.currentTarget.dataset.comment;
347 | const name = e.currentTarget.dataset.name;
348 | console.log(name)
349 | this.setData({
350 | replyId: id,
351 | replyInput: true,
352 | comment: comment,
353 | replayName: name
354 | })
355 | },
356 |
357 | // 回复回复
358 | replyReply(e) {
359 | const comment = e.currentTarget.dataset.comment;
360 | const id = e.currentTarget.dataset.member;
361 | const name = e.currentTarget.dataset.name;
362 | this.setData({
363 | replyId: id,
364 | replyInput: true,
365 | comment: comment,
366 | replayName: name
367 | })
368 | },
369 |
370 | getReply(e) {
371 | const replyText = e.detail.value;
372 | if (replyText.trim()) {
373 | this.setData({
374 | replyText: replyText
375 | })
376 | }
377 | },
378 |
379 | submitReply() {
380 | // 对某条评论回复
381 | if (this.data.comment == 1) {
382 | wx.$.fetch('api/comment/replyComment', {
383 | method: 'post',
384 | hideLoading: true,
385 | data: {
386 | content: this.data.replyText,
387 | comment_id: this.data.replyId,
388 | api_token: wx.getStorageSync('token')
389 | }
390 | }).then(res => {
391 | setTimeout(() => {
392 | wx.showToast({
393 | title: res.data.msg,
394 | })
395 | this.setData({
396 | replyText: '',
397 | replyInput: false,
398 | page: 1,
399 | comments: []
400 | })
401 | this.getComment()
402 | }, 100)
403 | })
404 | } else if (this.data.comment == 2) {
405 | wx.$.fetch('api/comment/reply', {
406 | method: 'post',
407 | hideLoading: true,
408 | data: {
409 | content: this.data.replyText,
410 | id: this.data.replyId,
411 | api_token: wx.getStorageSync('token')
412 | }
413 | }).then(res => {
414 | setTimeout(() => {
415 | wx.showToast({
416 | title: res.data.msg,
417 | })
418 | this.setData({
419 | replyText: '',
420 | replyInput: false,
421 | page: 1,
422 | comments: []
423 | })
424 | this.getComment()
425 | }, 100)
426 | })
427 | }
428 | },
429 |
430 |
431 | canvasIdErrorCallback(e) {
432 | console.error(e.detail.errMsg)
433 | },
434 |
435 | createdCode() {
436 | let that = this;
437 | const detail = this.data.detail;
438 | const ctx = wx.createCanvasContext('shareFrends');
439 | const date = new Date;
440 | const year = date.getFullYear();
441 | const month = date.getMonth() + 1;
442 | const day = date.getDate();
443 | const time = year + '.' + month + '.' + day;
444 | const name = detail.post_title;
445 | const coverWidth = this.data.coverWidth;
446 | const coverHeight = this.data.coverHeight;
447 | let pichName = detail.member.name;
448 | const explain = 'Hi,我想分享给你一条资讯猛料!';
449 | const erweima = '/imgs/erweima.png'
450 | // 截取昵称 超出省略。。。
451 | if (pichName.length > 16) {
452 | pichName = pichName.slice(0, 9) + '...'
453 | };
454 | // 绘制logo
455 | ctx.save()
456 | ctx.drawImage('/imgs/canvas-bg.jpg', 0, 0, 286, 480);
457 | ctx.drawImage('/imgs/share-logo.png', 140, 25, 128, 34);
458 |
459 | // 绘制时间
460 | ctx.setFontSize(12);
461 | ctx.setTextAlign('right');
462 | const metrics = ctx.measureText(time).width;
463 | ctx.fillText(time, 266, 78, metrics + 5);
464 | // 绘制 封面图并裁剪
465 | ctx.drawImage(this.data.cover, 0, (coverHeight - 129 * coverWidth / 252) / 2, coverWidth, 129*coverWidth/252 , 16, 94, 252, 129);
466 |
467 |
468 | // 绘制标题
469 | ctx.font = 'normal bold 14px sans-serif';
470 | ctx.setTextAlign('left');
471 | const nameWidth = ctx.measureText(name).width;
472 | // 标题换行
473 | this.wordsWrap(ctx, name, nameWidth, 252, 16, 252, 16);
474 | // 计算标题所占高度
475 | const titleHight = Math.ceil(nameWidth / 252) * 16;
476 | // 绘制头像和昵称
477 | ctx.arc(36, 268 + titleHight, 20, 0, 2 * Math.PI);
478 | ctx.clip()
479 | ctx.drawImage(this.data.avatar, 16, 248 + titleHight, 40, 44);
480 | ctx.restore();
481 | ctx.font = 'normal normal 14px sans-serif';
482 | ctx.setTextAlign('left');
483 | ctx.setFillStyle('#bbbbbb')
484 | ctx.fillText(pichName, 70, 270 + titleHight);
485 | // 二维码描述 及图片
486 | ctx.setStrokeStyle('#eeeeee');
487 | ctx.strokeRect(16, 300 + titleHight, 252, 80);
488 | ctx.setFillStyle('#333333')
489 | ctx.fillText(explain.slice(0, 11), 30, 336 + titleHight);
490 | ctx.fillText(explain.slice(11), 30, 358 + titleHight);
491 |
492 | ctx.drawImage(this.data.erweima, 194, 308 + titleHight, 44, 44);
493 | ctx.setFontSize(10);
494 | ctx.setFillStyle('#bbbbbb')
495 | ctx.fillText('长按扫码查看详情', 175, 370 + titleHight);
496 | // ctx.setFillStyle('#f7f7f7')
497 | // ctx.fillRect(0, 400 + titleHight, 286, 48)
498 | // ctx.setFontSize(14);
499 | // ctx.setFillStyle('#bbbbbb')
500 | // ctx.setTextAlign('center');
501 | // ctx.fillText('长按图片保存至相册，并分享至朋友圈！', 142, 430 + titleHight);
502 |
503 | ctx.draw()
504 |
505 |
506 | },
507 | // canvas 标题超出换行处理
508 | wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
509 | let lineWidth = 0;
510 | let lastSubStrIndex = 0;
511 | for (let i = 0; i < name.length; i++) {
512 | lineWidth += ctx.measureText(name[i]).width;
513 | if (lineWidth > maxWidth) {
514 | ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
515 | srartY += wordsHight;
516 | lineWidth = 0;
517 | lastSubStrIndex = i;
518 | }
519 | if (i == name.length - 1) {
520 | ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
521 | }
522 | }
523 | },
524 |
525 | shareFrends() {
526 | wx.showLoading({
527 | title: '图片生成中',
528 | })
529 | let that = this;
530 | const detail = this.data.detail;
531 | let avatar;
532 | const post_cover = detail.post_cover || '../../imgs/cars.png';
533 | wx.$.fetch('api/setLocalAvatar', {
534 | method: 'post',
535 | hideLoading: true,
536 | showLoading: true,
537 | data: {
538 | api_token: wx.getStorageSync('token'),
539 | member_id: detail.member.member_id,
540 | }
541 | }).then(res => {
542 | avatar = res.data.url;
543 | wx.getImageInfo({
544 | src: avatar,
545 | success: res => {
546 | that.setData({
547 | avatar: res.path
548 | })
549 | wx.getImageInfo({
550 | src: post_cover,
551 | success: res => {
552 | if (!/^https/.test(post_cover)) {
553 | res.path = post_cover
554 | };
555 | that.setData({
556 | cover: res.path,
557 | coverWidth: res.width,
558 | coverHeight: res.height
559 | })
560 | wx.$.fetch('api/getQrCode', {
561 | method: 'post',
562 | hideLoading: true,
563 | showLoading: true,
564 | data: {
565 | path: 'pages/topicdetail/index?id=' + this.data.id,
566 | post_id: this.data.id,
567 | width: 340
568 | }
569 | }).then(res => {
570 | wx.getImageInfo({
571 | src: res.data.path,
572 | success: res => {
573 | that.setData({
574 | erweima: res.path
575 | })
576 | that.createdCode()
577 | setTimeout(() => {
578 | wx.canvasToTempFilePath({
579 | x: 0,
580 | y: 0,
581 | canvasId: 'shareFrends',
582 | success: function (res) {
583 |
584 | let shareImg = res.tempFilePath;
585 | that.setData({
586 | shareImg: shareImg
587 | })
588 | that.setData({
589 | showModal: true,
590 | showShareModal: false
591 | })
592 | wx.hideLoading()
593 | },
594 | fail: function (res) {
595 | }
596 | })
597 | }, 500)
598 | }
599 | })
600 | })
601 | },
602 | fail(err) {
603 | console.log(err)
604 | }
605 | })
606 | }
607 | })
608 | })
609 |
610 | },
611 | getCurrent(e) {
612 | this.setData({
613 | current: e.detail.current
614 | })
615 | },
616 | hideModal() {
617 | this.setData({
618 | showModal: false
619 | })
620 | },
621 | saveImg() {
622 | let that = this;
623 | wx.getSetting({
624 | success(res) {
625 | if (!res.authSetting['scope.writePhotosAlbum']) {
626 | wx.authorize({
627 | scope: 'scope.writePhotosAlbum',
628 | success() {
629 | wx.saveImageToPhotosAlbum({
630 | filePath: that.data.shareImg,
631 | success() {
632 | wx.showToast({
633 | title: '保存成功'
634 | })
635 | that.addShareData(false)
636 | },
637 | fail() {
638 | wx.showToast({
639 | title: '保存失败',
640 | icon: 'none'
641 | })
642 | }
643 | })
644 | },
645 | fail() {
646 | that.setData({
647 | openSet: true
648 | })
649 | }
650 | })
651 | } else {
652 | wx.saveImageToPhotosAlbum({
653 | filePath: that.data.shareImg,
654 | success() {
655 | wx.showToast({
656 | title: '保存成功'
657 | })
658 | },
659 | fail() {
660 | wx.showToast({
661 | title: '保存失败',
662 | icon: 'none'
663 | })
664 | }
665 | })
666 | }
667 | }
668 | })
669 | },
670 |
671 | showShareModal() {
672 | this.setData({
673 | showShareModal: !this.data.showShareModal
674 | })
675 | },
676 | hideShareModal() {
677 | this.setData({
678 | showShareModal: false
679 | })
680 | },
681 |
682 | addShareData(wxChate) {
683 | wx.$.fetch('api/post/sharePost?post_id=' + this.data.id, {hideLoading: true}).then(res => {
684 | if (wxChate) {
685 | // setTimeout(() => {
686 | // console.log(5555)
687 | // wx.showToast({
688 | // title: '分享成功！',
689 | // }, 800)
690 | // })
691 |
692 | }
693 | })
694 | },
695 |
696 | // 评论头像跳转
697 | linCommentkUser(e) {
698 | return false
699 | const id = e.currentTarget.dataset.id;
700 | // 需要判断是否是自己，是自己跳转到自己主页
701 | const myId = this.data.myId
702 | if (myId == id) {
703 | wx.navigateTo({
704 | url: '/pages/myHomePage/index?id=' + id,
705 | })
706 | } else {
707 | wx.navigateTo({
708 | url: '/pages/userHomePage/index?id=' + id,
709 | })
710 | }
711 | },
712 |
713 | onReachBottom() {
714 | this.setData({
715 | page: this.data.page + 1
716 | })
717 | this.getComment()
718 | },
719 | // 下拉刷新
720 | onPullDownRefresh() {
721 | this.setData({
722 | page: 1,
723 | comments: [],
724 | })
725 | this.getComment()
726 | },
727 |
728 | // 转发
729 | onShareAppMessage(options) {
730 | const detail = this.data.detail;
731 | this.setData({
732 | showShareModal: false
733 | })
734 | const that = this;
735 | const ctx = wx.createCanvasContext('cropperCocer');
736 | let shareCover = detail.post_cover || '../../imgs/post_cover.png';
737 | let shareImg = shareCover;
738 | wx.getImageInfo({
739 | src: shareCover,
740 | success: res => {
741 | if (!/^https/.test(shareCover)) {
742 | res.path = shareCover
743 | };
744 | ctx.drawImage(res.path, (res.width - 250 * res.height / 200) / 2, 0, 250 * res.height / 200,res.height, 0, 0, 250, 200);
745 | ctx.draw()
746 | wx.canvasToTempFilePath({
747 | x: 0,
748 | y: 0,
749 | canvasId: 'cropperCocer',
750 | success: function (res) {
751 | shareImg = res.tempFilePath;
752 | },
753 | fail: function (res) {
754 | }
755 | })
756 | }
757 | })
758 |
759 | return {
760 | title: detail.post_title,
761 | imageUrl: shareImg,
762 | success: function (res) {
763 | that.addShareData(true)
764 | },
765 | fail: function (res) {
766 | setTimeout(() => {
767 | wx.showToast({
768 | title: '分享失败！',
769 | icon: 'none'
770 | },800)
771 | })
772 |
773 | }
774 | }
775 | }
776 | })
--------------------------------------------------------------------------------
/wxParse/wxParse.wxml:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 | {{item.text}}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | \n
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |
594 |
595 |
596 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 |
614 |
615 |
616 |
617 |
618 |
619 |
620 |
621 |
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
639 |
640 |
641 |
642 |
643 |
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |
662 |
663 |
664 |
665 |
666 |
667 |
668 |
669 |
670 |
671 |
672 |
677 |
678 |
679 |
680 |
681 |
682 |
683 |
684 |
685 |
686 |
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 |
701 |
702 |
703 |
704 |
705 |
706 |
707 |
708 |
709 |
710 |
711 |
712 |
713 |
714 |
715 |
716 |
717 |
718 |
719 |
720 |
721 |
722 |
723 |
724 |
725 |
726 |
727 |
728 |
729 |
730 |
731 |
732 |
733 |
734 |
735 |
736 |
737 |
738 |
739 |
740 |
741 |
742 |
743 |
744 |
745 |
746 |
747 |
748 |
753 |
754 |
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |
763 |
764 |
765 |
766 |
767 |
768 |
769 |
770 |
771 |
772 |
773 |
774 |
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
790 |
791 |
792 |
793 |
794 |
795 |
796 |
797 |
798 |
799 |
800 |
801 |
802 |
803 |
804 |
805 |
806 |
807 |
808 |
809 |
810 |
811 |
812 |
813 |
814 |
815 |
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
824 |
829 |
830 |
831 |
832 |
833 |
834 |
835 |
836 |
837 |
838 |
839 |
840 |
841 |
842 |
843 |
844 |
845 |
846 |
847 |
848 |
849 |
850 |
851 |
852 |
853 |
854 |
855 |
856 |
857 |
858 |
859 |
860 |
861 |
862 |
863 |
864 |
865 |
866 |
867 |
868 |
869 |
870 |
871 |
872 |
873 |
874 |
875 |
876 |
877 |
878 |
879 |
880 |
881 |
882 |
883 |
884 |
885 |
886 |
887 |
888 |
889 |
890 |
891 |
892 |
893 |
894 |
895 |
896 |
897 |
898 |
899 |
900 |
905 |
906 |
907 |
908 |
909 |
910 |
911 |
912 |
913 |
914 |
915 |
916 |
917 |
918 |
919 |
920 |
921 |
922 |
923 |
924 |
925 |
926 |
927 |
928 |
929 |
930 |
931 |
932 |
933 |
934 |
935 |
936 |
937 |
938 |
939 |
940 |
941 |
942 |
943 |
944 |
945 |
946 |
947 |
948 |
949 |
950 |
951 |
952 |
953 |
954 |
955 |
956 |
957 |
958 |
959 |
960 |
961 |
962 |
963 |
964 |
965 |
966 |
967 |
968 |
--------------------------------------------------------------------------------