├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmrc
├── README.md
├── babel.config.js
├── config
    ├── dev.js
    ├── index.js
    └── prod.js
├── global.d.ts
├── package.json
├── project.config.json
├── src
    ├── app.config.ts
    ├── app.less
    ├── app.ts
    ├── index.html
    ├── pages
    │   ├── index
    │   │   ├── index.config.ts
    │   │   ├── index.less
    │   │   └── index.vue
    │   └── show
    │   │   ├── show.config.ts
    │   │   ├── show.less
    │   │   └── show.vue
    └── utils
    │   ├── config.js
    │   └── request.js
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | // ESLint 检查 .vue 文件需要单独配置编辑器：
2 | // https://eslint.vuejs.org/user-guide/#editor-integrations
3 | {
4 |   'extends': ['taro/vue']
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | deploy_versions/
3 | .temp/
4 | .rn_temp/
5 | node_modules/
6 | .DS_Store
7 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
 1 | registry=https://registry.npm.taobao.org
 2 | disturl=https://npm.taobao.org/dist
 3 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
 4 | phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
 5 | electron_mirror=https://npm.taobao.org/mirrors/electron/
 6 | chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
 7 | operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver
 8 | selenium_cdnurl=https://npm.taobao.org/mirrors/selenium
 9 | node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector
10 | fsevents_binary_host_mirror=http://npm.taobao.org/mirrors/fsevents/
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wx-sta
 2 | 
 3 | 分享好玩的微信8.0状态背景
 4 | 
 5 | ## How to use
 6 | 
 7 | ```bash
 8 | # install dependencies
 9 | cnpm install
10 | 
11 | # serve with hot reload at localhost:10086
12 | npm run dev:weapp
13 | 
14 | # build for production with minification
15 | npm run build:weapp
16 | 
17 | ```
18 | 
19 | ## Tech stack
20 | 
21 | - Taro.js
22 | - Vue.js
23 | - Less
24 | 
25 | 
26 | 小程序预览
27 | <img src="https://img.qiaker.cn/1612249436243.jpg" width="400"/>
28 | 
29 | 
30 | 
31 | 如果你觉得这个项目帮助到了你，你可以帮作者买杯咖啡表示鼓励 ❤️
32 | 
33 | <img src="https://img.qiaker.cn/1612339808612.jpg" width="400"/>
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | // babel-preset-taro 更多选项和默认值：
 2 | // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
 3 | module.exports = {
 4 |   presets: [
 5 |     ['taro', {
 6 |       framework: 'vue',
 7 |       ts: true
 8 |     }]
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/config/dev.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     NODE_ENV: '"development"'
 4 |   },
 5 |   defineConstants: {
 6 |   },
 7 |   mini: {},
 8 |   h5: {}
 9 | }
10 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   projectName: 'wx-sta',
 3 |   date: '2021-1-29',
 4 |   designWidth: 750,
 5 |   deviceRatio: {
 6 |     640: 2.34 / 2,
 7 |     750: 1,
 8 |     828: 1.81 / 2
 9 |   },
10 |   sourceRoot: 'src',
11 |   outputRoot: 'dist',
12 |   plugins: [],
13 |   defineConstants: {
14 |   },
15 |   copy: {
16 |     patterns: [
17 |     ],
18 |     options: {
19 |     }
20 |   },
21 |   framework: 'vue',
22 |   mini: {
23 |     postcss: {
24 |       pxtransform: {
25 |         enable: true,
26 |         config: {
27 | 
28 |         }
29 |       },
30 |       url: {
31 |         enable: true,
32 |         config: {
33 |           limit: 1024 // 设定转换尺寸上限
34 |         }
35 |       },
36 |       cssModules: {
37 |         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
38 |         config: {
39 |           namingPattern: 'module', // 转换模式，取值为 global/module
40 |           generateScopedName: '[name]__[local]___[hash:base64:5]'
41 |         }
42 |       }
43 |     }
44 |   },
45 |   h5: {
46 |     publicPath: '/',
47 |     staticDirectory: 'static',
48 |     postcss: {
49 |       autoprefixer: {
50 |         enable: true,
51 |         config: {
52 |         }
53 |       },
54 |       cssModules: {
55 |         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
56 |         config: {
57 |           namingPattern: 'module', // 转换模式，取值为 global/module
58 |           generateScopedName: '[name]__[local]___[hash:base64:5]'
59 |         }
60 |       }
61 |     }
62 |   }
63 | }
64 | 
65 | module.exports = function (merge) {
66 |   if (process.env.NODE_ENV === 'development') {
67 |     return merge({}, config, require('./dev'))
68 |   }
69 |   return merge({}, config, require('./prod'))
70 | }
71 | 


--------------------------------------------------------------------------------
/config/prod.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     NODE_ENV: '"production"'
 4 |   },
 5 |   defineConstants: {
 6 |   },
 7 |   mini: {},
 8 |   h5: {
 9 |     /**
10 |      * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
11 |      * 参考代码如下：
12 |      * webpackChain (chain) {
13 |      *   chain.plugin('analyzer')
14 |      *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
15 |      * }
16 |      */
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.png';
 2 | declare module '*.gif';
 3 | declare module '*.jpg';
 4 | declare module '*.jpeg';
 5 | declare module '*.svg';
 6 | declare module '*.css';
 7 | declare module '*.less';
 8 | declare module '*.scss';
 9 | declare module '*.sass';
10 | declare module '*.styl';
11 | 
12 | // @ts-ignore
13 | declare const process: {
14 |   env: {
15 |     TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq';
16 |     [key: string]: any;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wx-sta",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "微信状态图库",
 6 |   "templateInfo": {
 7 |     "name": "default-youshu",
 8 |     "typescript": true,
 9 |     "css": "less"
10 |   },
11 |   "scripts": {
12 |     "build:weapp": "taro build --type weapp",
13 |     "build:swan": "taro build --type swan",
14 |     "build:alipay": "taro build --type alipay",
15 |     "build:tt": "taro build --type tt",
16 |     "build:qq": "taro build --type qq",
17 |     "dev:weapp": "npm run build:weapp -- --watch",
18 |     "dev:swan": "npm run build:swan -- --watch",
19 |     "dev:alipay": "npm run build:alipay -- --watch",
20 |     "dev:tt": "npm run build:tt -- --watch",
21 |     "dev:qq": "npm run build:qq -- --watch"
22 |   },
23 |   "browserslist": [
24 |     "last 3 versions",
25 |     "Android >= 4.1",
26 |     "ios >= 8"
27 |   ],
28 |   "author": "",
29 |   "dependencies": {
30 |     "@babel/runtime": "^7.7.7",
31 |     "@tarojs/components": "3.0.25",
32 |     "@tarojs/runtime": "3.0.25",
33 |     "@tarojs/taro": "3.0.25",
34 |     "vue-template-compiler": "^2.5.0",
35 |     "vue": "^2.5.0",
36 |     "sr-sdk-wxapp": "^1.3.6"
37 |   },
38 |   "devDependencies": {
39 |     "@types/webpack-env": "^1.13.6",
40 |     "@tarojs/mini-runner": "3.0.25",
41 |     "@babel/core": "^7.8.0",
42 |     "@tarojs/webpack-runner": "3.0.25",
43 |     "babel-preset-taro": "3.0.25",
44 |     "vue-loader": "^15.9.2",
45 |     "eslint-plugin-vue": "^6.x",
46 |     "eslint-config-taro": "3.0.25",
47 |     "eslint": "^6.8.0",
48 |     "stylelint": "9.3.0",
49 |     "@typescript-eslint/parser": "^2.x",
50 |     "@typescript-eslint/eslint-plugin": "^2.x",
51 |     "typescript": "^3.7.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "miniprogramRoot": "dist/",
 3 |     "projectname": "wx-sta",
 4 |     "description": "微信状态图库",
 5 |     "appid": "wx4feb8e53536131a2",
 6 |     "setting": {
 7 |         "urlCheck": true,
 8 |         "es6": false,
 9 |         "enhance": false,
10 |         "postcss": false,
11 |         "preloadBackgroundData": false,
12 |         "minified": false,
13 |         "newFeature": false,
14 |         "coverView": true,
15 |         "nodeModules": false,
16 |         "autoAudits": false,
17 |         "showShadowRootInWxmlPanel": true,
18 |         "scopeDataCheck": false,
19 |         "uglifyFileName": false,
20 |         "checkInvalidKey": true,
21 |         "checkSiteMap": true,
22 |         "uploadWithSourceMap": true,
23 |         "compileHotReLoad": false,
24 |         "useMultiFrameRuntime": true,
25 |         "useApiHook": true,
26 |         "useApiHostProcess": true,
27 |         "babelSetting": {
28 |             "ignore": [],
29 |             "disablePlugins": [],
30 |             "outputPath": ""
31 |         },
32 |         "enableEngineNative": false,
33 |         "bundle": false,
34 |         "useIsolateContext": true,
35 |         "useCompilerModule": true,
36 |         "userConfirmedUseCompilerModuleSwitch": false,
37 |         "userConfirmedBundleSwitch": false,
38 |         "packNpmManually": false,
39 |         "packNpmRelationList": [],
40 |         "minifyWXSS": true
41 |     },
42 |     "compileType": "miniprogram",
43 |     "condition": {
44 |         "plugin": {
45 |             "list": []
46 |         },
47 |         "game": {
48 |             "list": []
49 |         },
50 |         "gamePlugin": {
51 |             "list": []
52 |         },
53 |         "miniprogram": {
54 |             "list": [
55 |                 {
56 |                     "name": "pages/show/show",
57 |                     "pathName": "pages/show/show",
58 |                     "query": "id=23&__key_=16122590679331",
59 |                     "scene": null
60 |                 }
61 |             ]
62 |         }
63 |     }
64 | }


--------------------------------------------------------------------------------
/src/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   pages: [
 3 |     'pages/index/index',
 4 |     'pages/show/show'
 5 |   ],
 6 |   window: {
 7 |     backgroundTextStyle: 'light',
 8 |     navigationBarBackgroundColor: '#fff',
 9 |     navigationBarTitleText: 'WeChat',
10 |     navigationBarTextStyle: 'black'
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app.less:
--------------------------------------------------------------------------------
 1 | .el {
 2 |   white-space: nowrap;
 3 |   text-overflow: ellipsis;
 4 |   overflow: hidden;
 5 | }
 6 | 
 7 | .transition {
 8 |   -webkit-transition: all 0.5s;
 9 |   -ms-transition: all 0.5s;
10 |   -o-transition: all 0.5s;
11 |   -moz-transition: all 0.5s;
12 |   transition: all 0.5s;
13 | }
14 | 
15 | .el2 {
16 |   display: -webkit-box;
17 |   -webkit-box-orient: vertical;
18 |   -webkit-line-clamp: 2;
19 |   overflow: hidden;
20 | }
21 | 
22 | .el3 {
23 |   display: -webkit-box;
24 |   -webkit-box-orient: vertical;
25 |   -webkit-line-clamp: 3;
26 |   overflow: hidden;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import sr from 'sr-sdk-wxapp'
 3 | 
 4 | import './app.less'
 5 | 
 6 | /**
 7 |    * 有数埋点SDK 默认配置
 8 |    * 使用方法请参考文档 https://mp.zhls.qq.com/youshu-docs/develop/sdk/Taro.html
 9 |    * 如对有数SDK埋点接入有任何疑问，请联系微信：sr_data_service
10 |    */
11 |   sr.init({
12 |     /**
13 |      * 有数 - ka‘接入测试用’ 分配的 app_id，对应的业务接口人负责
14 |      */
15 |     token: 'bi6cdbda95ae2640ec',
16 |   
17 |     /**
18 |      * 微信小程序appID，以wx开头
19 |      */
20 |     appid: 'touristappid',
21 |   
22 |     /**
23 |      * 如果使用了小程序插件，需要设置为 true
24 |      */
25 |     usePlugin: false,
26 |   
27 |     /**
28 |      * 开启打印调试信息， 默认 false
29 |      */
30 |     debug: true,
31 |   
32 |     /**
33 |      * 建议开启-开启自动代理 Page， 默认 false
34 |      * sdk 负责上报页面的 browse 、leave、share 等事件
35 |      * 可以使用 sr.page 代替 Page(sr.page(options))
36 |      * 元素事件跟踪，需要配合 autoTrack: true
37 |      */
38 |     proxyPage: true,
39 |     /**
40 |      * 建议开启-开启组件自动代理， 默认 false
41 |      * sdk 负责上报页面的 browse 、leave、share 等事件
42 |      */
43 |     proxyComponent: true,
44 |     // 建议开启-是否开启页面分享链路自动跟踪
45 |     openSdkShareDepth: true,
46 |     // 建议开启-元素事件跟踪，自动上报元素事件，入tap、change、longpress、confirm
47 |     autoTrack: true,
48 |     installFrom: 'Taro@v3'
49 |   })
50 | 
51 | const App = new Vue({
52 |   onShow (options) {
53 |   },
54 |   render(h) {
55 |     // this.$slots.default 是将要会渲染的页面
56 |     return h('block', this.$slots.default)
57 |   }
58 | })
59 | 
60 | export default App
61 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 5 |   <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
 6 |   <meta name="apple-mobile-web-app-capable" content="yes">
 7 |   <meta name="apple-touch-fullscreen" content="yes">
 8 |   <meta name="format-detection" content="telephone=no,address=no">
 9 |   <meta name="apple-mobile-web-app-status-bar-style" content="white">
10 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
11 |   <title></title>
12 |   <script>
13 |     !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
14 |   </script>
15 | </head>
16 | <body>
17 |   <div id="app"></div>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/pages/index/index.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   navigationBarTitleText: '最新素材',
3 |   enablePullDownRefresh: true
4 | }
5 | 


--------------------------------------------------------------------------------
/src/pages/index/index.less:
--------------------------------------------------------------------------------
 1 | page {
 2 |     background-color: #f7f8f9;
 3 | }
 4 | .photo_list {
 5 |     padding: 25rpx;
 6 |     .photo_item {
 7 |         width: 700px;
 8 |         height: 400px;
 9 |         overflow: hidden;
10 |         border-radius: 10px;
11 |         margin-bottom: 25px;
12 |         position: relative;
13 |         .mask {
14 |             position: absolute;
15 |             bottom: 0;
16 |             left: 0;
17 |             width: 700px;
18 |             height: 400px;
19 |             z-index: 1;
20 |             background-image: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
21 | 
22 |         }
23 |         .title {
24 |             position: absolute;
25 |             bottom: 0;
26 |             left: 0;
27 |             width: 650px;
28 |             padding: 25px;
29 |             z-index: 2;
30 |             font-size: 40px;
31 |             font-weight: 500;
32 |             color: #fff;
33 |         }
34 |         .thumb {
35 |             width: 700px;
36 |             height: 400px;
37 |         }
38 |     }
39 |     .ad_item {
40 |        width: 700px;
41 |        overflow: hidden;
42 |        border-radius: 10px;
43 |        margin-bottom: 25px;
44 |     }
45 | }


--------------------------------------------------------------------------------
/src/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="index">
  3 |       <view class="photo_list">
  4 |         <view class="photo_item_main" v-for="(item,index) in photos" :key="item.id" @tap="goDetail(item.id)"> 
  5 |           <view class="photo_item">
  6 |             <view class="title">{{item.title}}</view>
  7 |             <view class="mask"></view>
  8 |             <image class="thumb" mode="aspectFill" :src="item.thumb" />
  9 |           </view>
 10 |             
 11 |           <view class="ad_item" v-if="index == 0 || index == 6 || index == 12 || index == 18"> 
 12 |             <ad unit-id="adunit-676cce9ac4d3b8bf"></ad>
 13 |           </view>
 14 |           <view class="ad_item" v-if="index == 3 || index == 9 || index == 15 || index == 20">
 15 |             <ad unit-id="adunit-3fb6b99d59fc7ec2" ad-type="video" ad-theme="white"></ad>
 16 |           </view>
 17 |         </view>
 18 |       </view>
 19 |   </view>
 20 | </template>
 21 | 
 22 | <script>
 23 | import Taro from "@tarojs/taro";
 24 | import { serverUrl } from "../../utils/config";
 25 | import './index.less'
 26 | 
 27 | export default {
 28 |   data() {
 29 |     return {
 30 |       page: 1,
 31 |       photos: [],
 32 |       loading: false,
 33 |     }
 34 |   },
 35 |   onLoad() {
 36 | 
 37 |     // 在页面中定义插屏广告
 38 |     let interstitialAd = null;
 39 | 
 40 |     // 在页面onLoad回调事件中创建插屏广告实例
 41 |     if (wx.createInterstitialAd) {
 42 |       interstitialAd = wx.createInterstitialAd({
 43 |         adUnitId: "adunit-99a1a16556dcdfcc",
 44 |       });
 45 |       interstitialAd.onLoad(() => {});
 46 |       interstitialAd.onError((err) => {});
 47 |       interstitialAd.onClose(() => {});
 48 |     }
 49 | 
 50 |     // 在适合的场景显示插屏广告
 51 |     if (interstitialAd) {
 52 |       interstitialAd.show().catch((err) => {
 53 |         console.error(err);
 54 |       });
 55 |     }
 56 |   },
 57 |   onShow() {
 58 |     this.getPhotos();
 59 |   },
 60 |   onPullDownRefresh() {
 61 |     this.page = 1
 62 |     this.getPhotos();
 63 |   },
 64 |   onReachBottom() {
 65 |     this.getPhotos();
 66 |   },
 67 |   onShareAppMessage() {},
 68 |   onShareTimeline() {
 69 |     return {
 70 |       title: "微信8.0在线状态个性图片",
 71 |       imageUrl: "",
 72 |       query: "",
 73 |     };
 74 |   },
 75 |   mounted(){
 76 |     // this.getPhotos()
 77 |   },
 78 |   methods: {
 79 |     goDetail(id){
 80 |       Taro.navigateTo({
 81 |         url: "/pages/show/show?id=" + id,
 82 |       });
 83 |     },
 84 |     getPhotos() {
 85 |       if (!this.loading) {
 86 |         this.loading = true;
 87 |         Taro.showLoading({
 88 |           title: '加载中',
 89 |         })
 90 |         Taro.request({
 91 |           url: serverUrl + '?c=photos&page=' + this.page,
 92 |         }).then((res) => {
 93 |           Taro.hideLoading()
 94 |           Taro.stopPullDownRefresh()
 95 |           if (res.data.success) {
 96 |             if (this.page == 1) {
 97 |               this.photos = res.data.photos;
 98 |             } else {
 99 |               this.photos = [...this.photos, ...res.data.photos];
100 |             }
101 |             this.page++;
102 |           }
103 |           this.loading = false;
104 |         });
105 |       }
106 |     },
107 |   }
108 | }
109 | </script>
110 | 


--------------------------------------------------------------------------------
/src/pages/show/show.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   navigationBarTitleText: '详情'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/pages/show/show.less:
--------------------------------------------------------------------------------
 1 | .photo_detail {
 2 |     padding: 25px;
 3 |     .title {
 4 |         font-size: 36px;
 5 |         font-weight: 500;
 6 |         color: #000;
 7 |         margin-bottom: 20px;
 8 |     }
 9 |     .content {
10 |         margin-bottom: 20px;
11 |         color: #666;
12 |     }
13 |     .source {
14 |         margin-bottom: 20px;
15 |         image {
16 |             width: 100%;
17 |             display: block;
18 |             border-radius: 10px;
19 |         }
20 |         video {
21 |             width: 100%;
22 |         }
23 |     }
24 |     .download {
25 |         display: flex;
26 |         justify-content: center;
27 |         align-items: center;
28 |         width: 100%;
29 |         height: 100px;
30 |         border-radius: 10px;
31 |         margin-bottom: 20px;
32 |         font-size: 40px;
33 |         color: #fff;
34 |         font-weight: 600;
35 |         background-image: linear-gradient(135deg, #81FBB8 10%, #28C76F 100%);
36 |     }
37 | 
38 |     .ad_item {
39 |       width: 700px;
40 |       overflow: hidden;
41 |       border-radius: 10px;
42 |       margin-bottom: 25px;
43 |     }
44 | }


--------------------------------------------------------------------------------
/src/pages/show/show.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="index">
  3 |     <view class="photo_detail">
  4 |       <view class="title">{{ info.title }}</view>
  5 |       <view class="content">
  6 |         <rich-text :nodes="content"></rich-text>
  7 |       </view>
  8 |       <view class="source">
  9 |         <image
 10 |           mode="widthFix"
 11 |           @tap="preview(info.link)"
 12 |           :src="info.link"
 13 |           v-if="info.type == 1"
 14 |         />
 15 |         <video
 16 |           :src="info.link"
 17 |           v-if="info.type == 2"
 18 |           controls="true"
 19 |           :poster="info.thumb"
 20 |         />
 21 |       </view>
 22 |       <!-- <view class="ad_item">
 23 |         <ad unit-id="adunit-676cce9ac4d3b8bf"></ad>
 24 |       </view> -->
 25 |       <view class="download" v-if="info.type == 1" @tap="preview(info.link)"
 26 |         >点击图片长按保存</view
 27 |       >
 28 |       <view class="download" v-if="info.type == 2" @tap="download"
 29 |         >点击保存到相册</view
 30 |       >
 31 | 
 32 |       <view class="ad_item">
 33 |         <ad
 34 |           unit-id="adunit-3fb6b99d59fc7ec2"
 35 |           ad-type="video"
 36 |           ad-theme="white"
 37 |         ></ad>
 38 |       </view>
 39 |     </view>
 40 |   </view>
 41 | </template>
 42 | 
 43 | <script>
 44 | import Taro from "@tarojs/taro";
 45 | import { serverUrl } from "../../utils/config";
 46 | import "./show.less";
 47 | let videoAd = null;
 48 | export default {
 49 |   data() {
 50 |     return {
 51 |       id: 0,
 52 |       info: [],
 53 |       content: "",
 54 |     };
 55 |   },
 56 | 
 57 |   onShareAppMessage() {
 58 |     return {
 59 |       title: this.info.title,
 60 |       imageUrl: this.info.thumb,
 61 |     };
 62 |   },
 63 |   onShareTimeline() {
 64 |     return {
 65 |       title: this.info.title,
 66 |       imageUrl: this.info.thumb,
 67 |       query: "id=" + this.id,
 68 |     };
 69 |   },
 70 |   onLoad(options) {
 71 |     let id = options.id;
 72 |     this.id = id;
 73 |     this.getDetail(id);
 74 | 
 75 |     // 在页面中定义插屏广告
 76 |     let interstitialAd = null;
 77 | 
 78 |     // 在页面onLoad回调事件中创建插屏广告实例
 79 |     if (wx.createInterstitialAd) {
 80 |       interstitialAd = wx.createInterstitialAd({
 81 |         adUnitId: "adunit-99a1a16556dcdfcc",
 82 |       });
 83 |       interstitialAd.onLoad(() => {});
 84 |       interstitialAd.onError((err) => {});
 85 |       interstitialAd.onClose(() => {});
 86 |     }
 87 | 
 88 |     // 在适合的场景显示插屏广告
 89 |     if (interstitialAd) {
 90 |       interstitialAd.show().catch((err) => {
 91 |         console.error(err);
 92 |       });
 93 |     }
 94 | 
 95 |     // 在页面onLoad回调事件中创建激励视频广告实例
 96 |     if (wx.createRewardedVideoAd) {
 97 |       videoAd = wx.createRewardedVideoAd({
 98 |         adUnitId: "adunit-fba5c4dd65498d8c",
 99 |       });
100 |       videoAd.onLoad(() => {});
101 |       videoAd.onError((err) => {});
102 |       videoAd.onClose((res) => {
103 |         if (res && res.isEnded) {
104 |           this.downloadFile();
105 |         } else {
106 |           // 播放中途退出，不下发游戏奖励
107 |         }
108 |       });
109 |     }
110 |   },
111 |   methods: {
112 |     preview(src) {
113 |       Taro.previewImage({
114 |         current: src, // 当前显示图片的http链接
115 |         urls: [src], // 需要预览的图片http链接列表
116 |       });
117 |     },
118 |     download() {
119 |       Taro.showModal({
120 |         title: "提示",
121 |         content: "花几秒钟看完广告就能下载了哦",
122 |         success: function (res) {
123 |           if (res.confirm) {
124 |             console.log("用户点击确定");
125 | 
126 |             // 用户触发广告后，显示激励视频广告
127 |             if (videoAd) {
128 |               videoAd.show().catch(() => {
129 |                 // 失败重试
130 |                 videoAd
131 |                   .load()
132 |                   .then(() => videoAd.show())
133 |                   .catch((err) => {
134 |                     console.log("激励视频 广告显示失败");
135 |                   });
136 |               });
137 |             }
138 |           } else if (res.cancel) {
139 |             console.log("用户点击取消");
140 |           }
141 |         },
142 |       });
143 |     },
144 |     downloadFile() {
145 |       wx.downloadFile({
146 |         url: this.info.link, //图片地址
147 |         success: function (res) {
148 |           //图片保存到本地
149 |           wx.saveVideoToPhotosAlbum({
150 |             filePath: res.tempFilePath,
151 |             success: function (data) {
152 |               wx.hideLoading();
153 |               wx.showModal({
154 |                 title: "提示",
155 |                 content: "视频文件已保存到相册",
156 |                 showCancel: false,
157 |               });
158 |             },
159 |             fail: function (err) {
160 |               if (
161 |                 err.errMsg === "saveVideoToPhotosAlbum:fail:auth denied" ||
162 |                 err.errMsg === "saveVideoToPhotosAlbum:fail auth deny" ||
163 |                 err.errMsg ===
164 |                   "saveVideoToPhotosAlbum:fail authorize no response"
165 |               ) {
166 |                 // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
167 |                 wx.showModal({
168 |                   title: "提示",
169 |                   content: "需要您授权保存相册",
170 |                   showCancel: false,
171 |                   success: (modalSuccess) => {
172 |                     wx.openSetting({
173 |                       success(settingdata) {
174 |                         console.log("settingdata", settingdata);
175 |                         if (settingdata.authSetting["scope.writePhotosAlbum"]) {
176 |                           wx.showModal({
177 |                             title: "提示",
178 |                             content: "获取权限成功,再次点击即可保存",
179 |                             showCancel: false,
180 |                           });
181 |                         } else {
182 |                           wx.showModal({
183 |                             title: "提示",
184 |                             content: "获取权限失败，将无法保存到相册哦~",
185 |                             showCancel: false,
186 |                           });
187 |                         }
188 |                       },
189 |                       fail(failData) {
190 |                         console.log("failData", failData);
191 |                       },
192 |                       complete(finishData) {
193 |                         console.log("finishData", finishData);
194 |                       },
195 |                     });
196 |                   },
197 |                 });
198 |               }
199 |             },
200 |             complete(res) {
201 |               wx.hideLoading();
202 |             },
203 |           });
204 |         },
205 |       });
206 |     },
207 |     getDetail(id) {
208 |       Taro.request({
209 |         url: serverUrl + "?c=detail&id=" + id,
210 |       }).then((res) => {
211 |         if (res.data.success) {
212 |           Taro.setNavigationBarTitle({
213 |             title: res.data.info.title,
214 |           });
215 |           this.info = res.data.info;
216 |           this.content = res.data.info.content.replace(
217 |             /\<img/gi,
218 |             '<img style="max-width:100%;height:auto" '
219 |           );
220 |         }
221 |       });
222 |     },
223 |   },
224 | };
225 | </script>
226 | 


--------------------------------------------------------------------------------
/src/utils/config.js:
--------------------------------------------------------------------------------
1 | export const serverUrl = 'https://qiaker.cn/api'
2 | 


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | import Taro from '@tarojs/taro'
 2 | 
 3 | export default function request(url, method, data) {
 4 |     Taro.showLoading({
 5 |         title: '加载中...'
 6 |     })
 7 |     return Taro.request({
 8 |         url,
 9 |         method,
10 |         data,
11 |         header: {
12 |             'content-type': 'application/json',
13 |         }
14 |     }).then(res => {
15 |         Taro.hideLoading()
16 |         return res.data
17 |     }).catch (err => {
18 |         Taro.hideLoading()
19 |         return err
20 |     })
21 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2017",
 4 |     "module": "commonjs",
 5 |     "removeComments": false,
 6 |     "preserveConstEnums": true,
 7 |     "moduleResolution": "node",
 8 |     "experimentalDecorators": true,
 9 |     "noImplicitAny": false,
10 |     "allowSyntheticDefaultImports": true,
11 |     "outDir": "lib",
12 |     "noUnusedLocals": true,
13 |     "noUnusedParameters": true,
14 |     "strictNullChecks": true,
15 |     "sourceMap": true,
16 |     "baseUrl": ".",
17 |     "rootDir": ".",
18 |     "jsx": "react",
19 |     "allowJs": true,
20 |     "resolveJsonModule": true,
21 |     "typeRoots": [
22 |       "node_modules/@types",
23 |       "global.d.ts"
24 |     ]
25 |   },
26 |   "exclude": [
27 |     "node_modules",
28 |     "dist"
29 |   ],
30 |   "compileOnSave": false
31 | }
32 | 


--------------------------------------------------------------------------------