feat: http

README.md

@@ -9,6 +9,6 @@ npm dev
 
 ## 插件简介
 
-插件小程序的appid使用的是票圈祝福 `wxf7261ed54f2e450e`
-测试小程序的appid使用的是老好看 `wx58cb402db1e94bb7`
+插件小程序的appid使用的是 **票圈好视界** `wx5ef216d1caf4a0ea`
+测试小程序的appid使用的是 **票圈好视界** `wx5ef216d1caf4a0ea`
 开发阶段需要将开发者工具调到插件模式，选择对应的小程序即可

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "miniprogram/",
   "pluginRoot": "plugin/",
   "compileType": "plugin",
-  "appid": "wx58cb402db1e94bb7",
+  "appid": "wx5ef216d1caf4a0ea",
   "projectname": "wx-custom-plugin",
   "description": "",
   "setting": {
@@ -21,7 +21,7 @@
     },
     "condition": false
   },
-  "pluginAppid": "wxf7261ed54f2e450e",
+  "pluginAppid": "wx5ef216d1caf4a0ea",
   "libVersion": "3.2.0",
   "srcMiniprogramRoot": "miniprogram/",
   "packOptions": {

src/app.config.ts

@@ -14,7 +14,7 @@ export default {
   plugins: {
     myPlugin: {
       version: 'dev',
-      provider: 'wxf7261ed54f2e450e'
+      provider: 'wx5ef216d1caf4a0ea'
     }
   }
 }

src/config/index.ts

@@ -0,0 +1,4 @@
+export const APP_ID = 'wx5ef216d1caf4a0ea'
+export const APP_TYPE = 110
+export const APP_VERSION_CODE = '1.0.1'
+export const VERSION_CODE = 1

src/http/api/base.ts

@@ -0,0 +1,17 @@
+export const BASE_DOMAIN = {
+  development: 'https://videotest.yishihui.com',
+  staging: 'https://videopre.piaoquantv.com',
+  production: 'https://vlogapi.piaoquantv.com'
+}
+
+export const INVITE_API_DOMAIN = {
+  development: 'https://testapi.piaoquantv.com',
+  staging: 'https://preapi.piaoquantv.com',
+  production: 'https://api.piaoquantv.com'
+}
+
+export const BASE_COMMON_DOMAIN = {
+  development: 'https://videotest.yishihui.com',
+  staging: 'https://precommon.piaoquantv.com',
+  production: 'https://common.piaoquantv.com'
+}

src/http/api/index.ts

@@ -0,0 +1,9 @@
+import Taro from '@tarojs/taro'
+import { BASE_DOMAIN, INVITE_API_DOMAIN, BASE_COMMON_DOMAIN } from './base'
+
+function env(BASE_DOMAIN) {
+  const envApi = Taro.getStorageSync('env')
+  return BASE_DOMAIN[envApi || 'production']
+}
+
+export const adSelfPredict =  `${env(INVITE_API_DOMAIN)}/ad/self/predict`

src/http/index.ts

@@ -1 +1,105 @@
-console.log(process.env.NODE_ENV)
+import Taro from '@tarojs/taro'
+import { APP_ID, APP_TYPE, APP_VERSION_CODE, VERSION_CODE } from '@/config'
+
+class Http {
+  get(url: string, data = {}, config: ConfigType = {}) {
+    const { header = {} } = config
+
+    data = wrapData(data)
+
+    return new Promise((success, fail) => {
+      const expParams: ConfigType = {
+        header: {
+          'content-type': 'application/x-www-form-urlencoded',
+          ...header
+        }
+      }
+
+      Taro.request({
+        url,
+        data,
+        success,
+        fail,
+        ...expParams
+      })
+    })
+  }
+
+  post(url: string, data = {}, config: ConfigType = {}) {
+    const { header = {} } = config
+
+    data = wrapData(data)
+
+    if ((data as DataType).baseInfo)
+      data = createBaseInfoToFetchData(data)
+
+    return new Promise((resolve, reject) => {
+      const expParams: ConfigType = {
+        header: {
+          'content-type': 'application/x-www-form-urlencoded',
+          ...header
+        },
+        method: 'POST'
+      }
+
+      Taro.request({
+        url,
+        data,
+        success(res) {
+          const { data, statusCode } = res
+
+          if (statusCode !== 200) {
+            reject(data)
+            return
+          }
+
+          resolve(data)
+        },
+        fail(res) {
+          reject(res)
+        },
+        ...expParams
+      })
+    })
+  }
+}
+
+export function wrapData(params) {
+  const systemInfo = Taro.$global.systemInfo
+  const launchOption = Taro.$global.launchOption
+  const network = Taro.$global.network
+
+  const defaultInfo = {
+    appId: APP_ID,
+    appType: APP_TYPE,
+    versionCode: VERSION_CODE,
+    appVersionCode: APP_VERSION_CODE,
+    clientTimestamp: new Date().getTime(),
+    platform: systemInfo.platform,
+    system: systemInfo.system,
+    network: network.networkType,
+    careModelStatus: systemInfo.easyMode,
+    senceType: launchOption.scene
+  }
+
+  return {
+    ...defaultInfo,
+    ...params
+  }
+}
+
+export function createBaseInfoToFetchData(data) {
+  const baseKey = ['token', 'loginUid', 'appType', 'machineCode', 'platform', 'machineInfo', 'networkType', 'pageSource', 'rootPageSource', 'clientTimestamp', 'sessionId', 'subSessionId', 'requestId', 'pageCategoryId', 'rootPageCategoryId', 'openType', 'shareDepth', 'eventId', 'videoReportMeta', 'rootPageTimestamp', 'returnId', 'system']
+
+  return Object.keys(data).reduce((calc, key) => {
+    if (baseKey.includes(key)) {
+      calc.baseInfo[key] = data[key]
+    } else {
+      calc.params[key] = data[key]
+    }
+
+    return calc
+  }, { baseInfo: {}, params: {} })
+}
+
+export default new Http()

src/pages/index/data.json

@@ -0,0 +1,36 @@
+{
+  "code": 0,
+  "msg": "success",
+  "data": {
+      "ownPlatformAlliance": {
+          "adType": "ownPlatformAlliance",
+          "platformCreativeInfo": {
+              "id": 3392,
+              "creativeCode": "CREATIVE_17086709080881163",
+              "adId": 1129,
+              "adCode": "AD_17086709079461991",
+              "campaignId": 172,
+              "campaignCode": "CAMPAIGN_17024525411821220",
+              "advertiserId": 332,
+              "advertiserCode": "ADA_17024523941341815",
+              "creativePattern": 2,
+              "creativeTitle": "联盟广告测试",
+              "copywriting": "111",
+              "materialType": "PICTURE",
+              "materialAddress": "http://rescdn.yishihui.com/ad/prod/image/material_CREATIVE_17086709080881163_1708670908088.png",
+              "creativeLogoAddress": "http://rescdn.yishihui.com/ad/prod/image/logo_1708670908043.png",
+              "clickButtonText": "按钮文案",
+              "clickButtonColor": "#00C25D",
+              "clickButtonEffects": 0,
+              "landingPageType": 2,
+              "landingPageAddress": "https://www.baidu.com",
+              "positionId": 13,
+              "adpId":"xxxxxx",
+              "trafficCode":"ATP182138123",
+              "bidType": 1
+          },
+          "ownInAb": true
+      }
+  },
+  "success": true
+}

src/pages/index/index.tsx

@@ -1,20 +1,12 @@
 import Taro, { useLoad } from '@tarojs/taro'
 import React from 'react'
 import { View } from '@tarojs/components'
-// import Demo from '@/pages/components/demo/index'
 import './index.less'
 
-// console.log(Demo)
-// debugger
-// console.log(Taro.getApp())
-
 const myPluginInterface = Taro.requirePlugin('myPlugin')
 
 const Index: React.FC = () => {
   useLoad(() => {
-    // myPluginInterface.sayHello()
-    // const answer = myPluginInterface.answer
-    // console.log('answer: ', answer)
   })
 
   function onClick() {
@@ -26,7 +18,7 @@ const Index: React.FC = () => {
 
   return (
     <View className='index'>
-      <calendar />
+      <custom />
     </View>
   )
 }

src/plugin/components/custom/index.tsx

@@ -1,9 +1,11 @@
-import Taro, { useLoad, useReady, useUnload, useScope } from '@tarojs/taro'
+import Taro, { useLoad, useReady, useUnload } from '@tarojs/taro'
 import { PropsWithChildren, useState } from 'react'
-import { View, Video, Navigator, Image } from '@tarojs/components'
+import { View, Video, Image } from '@tarojs/components'
 import useGetCustomClient from '@/hooks/useGetCustomClient'
 import { wrapProps } from '@/plugin/share'
 import './index.less'
+import http from '@/http/index'
+import { adSelfPredict } from '@/http/api/index'
 
 // const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
 const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1708595757_1708595757542.mp4'
@@ -35,6 +37,24 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   } = wrapProps(props)
   const [show, setShow] = useState(true)
 
+  useReady(() => {
+    getAdConfig()
+  })
+
+  function getAdConfig() {
+    http.post(adSelfPredict, {
+      baseInfo: {},
+      positionId: 1,
+      phoneModel : '',
+      careModelStatus : 1,
+      videoId: 0
+    }, {
+      header: { 'content-type': 'application/json;' }
+    }).then((res: RequestType) => {
+      console.log(res)
+    })
+  }
+
   function videoPlay() {
     onPlay()
   }

src/plugin/index.ts

@@ -1,5 +1,32 @@
-export function sayHello () {
-  console.log('Hello plugin!')
+import Taro from '@tarojs/taro'
+
+async function loadPlugin() {
+  Taro.$global = await createTaroGlobal()
+  listenNetwork()
+  console.log(Taro.$global)
+
+}
+
+async function createTaroGlobal() {
+  const global = {
+    systemInfo: Taro.getSystemInfoSync() || {},
+    network: await Taro.getNetworkType() || {},
+    launchOption: {}
+  }
+
+  try {
+    global.launchOption = Taro.getLaunchOptionsSync()
+  } catch (e) {
+    console.log('不支持 getLaunchOptionsSync')
+  }
+
+  return global
+}
+
+function listenNetwork() {
+  Taro.onNetworkStatusChange(({ networkType }) => {
+    Taro.$global.network.networkType = networkType
+  })
 }
 
-export const answer = 42
+loadPlugin()

src/plugin/pages/customPage/index.less

@@ -1,64 +0,0 @@
-.custom-page {
- .nav-bar {
-    display: flex;
-    align-items: center;
-
-    .left-icon {
-      position: absolute;
-      width: 23px;
-      height: 23px;
-      border-top: 4rpx solid #333;
-      border-right: 4rpx solid #333;
-      transform:rotate(-135deg);
-    }
- }
-
- .page-content {
-    box-sizing: border-box;
-    padding-top: 1rpx;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .page-image {
-      width: 100%;
-      height: 100%
-    }
-
-    .page-guide {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-
-      .guide-title {
-        width: 278rpx;
-        height: 84rpx;
-        background: #FFDF4A;
-        border-radius: 0rpx 0rpx 42rpx 42rpx;
-        z-index: 2;
-        text-align: center;
-        line-height: 84rpx;
-        color: #000;
-        font-size: 42rpx
-      }
-
-      .guide-content {
-        padding-top: 22rpx; 
-        width: 667rpx;
-        height: 278rpx;
-        background: rgba(255, 255, 255, .3);
-        border-radius: 35rpx;
-        margin-top: -42rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        font-size: 48rpx;
-
-        text {
-          text-align: left;
-        }
-      }
-    }
- }
-}

src/plugin/pages/customPage/index.tsx

@@ -1,110 +0,0 @@
-import Taro, { useDidHide, useLoad } from '@tarojs/taro'
-import { useState } from 'react'
-import { getTopSafeHeight } from '@/hooks/useGetCustomClient'
-import { View, Text, Image } from '@tarojs/components'
-import './index.less'
-
-function CustomPage() {
-  const styleSheet = {
-    page: {
-      background: '#006FE3',
-      color: '#fff',
-    },
-    title: {
-      fontSize: '69rpx',
-      fontWeight: '',
-      marginTop: '104rpx',
-      marginBottom: '54rpx'
-    },
-    content: {
-      width: '486rpx',
-      height: '486rpx'
-    },
-    guide: {
-      marginTop: '38rpx',
-    }
-  }
-
-  const adInfo = {
-    title: '添加官方客服微信',
-    image: 'https://img.jianyufu.com/uploadfile/20231208/591615452983762944.jpg'
-  }
-
-  const [isCustom, setIsCustom] = useState(false)
-  const [statusBarHeight, setStatusBarHeight] = useState(0)
-  const [navBarStyle, setNavBarStyle] = useState({ height: '0px', marginLeft: 'px' })
-  useLoad(() => {
-    const spaceHeight = getTopSafeHeight()
-    const { screenHeight, windowHeight } = Taro.getSystemInfoSync()
-    setIsCustom(spaceHeight + windowHeight > screenHeight)
-
-    // 状态栏 刘海屏
-    const systemInfo = Taro.getSystemInfoSync()
-    const { statusBarHeight = 0 } = systemInfo
-    setStatusBarHeight(statusBarHeight)
-    // 胶囊信息
-    const menuInfo = Taro.getMenuButtonBoundingClientRect()
-    // 导航高度固定 44px
-    let navigationBarHeight = (menuInfo.top - statusBarHeight) * 2 + menuInfo.height
-
-    setNavBarStyle({
-      height: `${ Math.min(44, navigationBarHeight)}px`,
-      marginLeft: `${(systemInfo.screenWidth - menuInfo.right) * 2}px`
-    })
-  })
-
-  useDidHide(() => {
-    console.log('hide')
-  })
-
-  function navigateBack() {
-    wx.navigateBack()
-  }
-
-  return (
-    <View className='custom-page'>
-      {/* 状态栏 */}
-      {isCustom && <View className='status-bar' style={{ height: `${statusBarHeight}px`}}></View>}
-      {/* 导航栏 */}
-      {isCustom && <View className='nav-bar' style={navBarStyle} >
-        <View className='left-icon' onClick={navigateBack}></View>  
-      </View>}
-      {/* 页面 */}
-      <Page styleSheet={styleSheet} adInfo={adInfo} />
-    </View>
-  )
-}
-
-function Page({ styleSheet, adInfo }) {
-  const pageStyle = {
-    width: '100vw',
-    height: `calc(100vh - ${getTopSafeHeight()}px)`,
-    background: styleSheet.page.background,
-    color: styleSheet.page.color
-  }
-
-  function onLongPress(evt) {
-    console.log(evt)
-  }
-
-  return (
-    <View className='page-content' style={pageStyle}>
-      <View className='page-title' style={styleSheet.title}>
-        <Text>{adInfo.title}</Text>
-      </View>
-      <View className='page-content' style={styleSheet.content}>
-        <Image className='page-image' src={adInfo.image} 	showMenuByLongpress onLongPress={onLongPress}/>
-      </View>
-      <View className='page-guide' style={styleSheet.guide}>
-
-        <View className='guide-title'>添加方法</View>
-        <View className='guide-content'>
-          <Text>1、长按上面图片3秒</Text>
-          <Text>2、点击识别图中二维码</Text>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export default CustomPage

src/plugin/pages/miniWeb/index.less

@@ -1,66 +0,0 @@
-.mini-web {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-
-  .modal {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: rgba(0, 0, 0, .2);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    animation-name: fadeIn;
-    animation-duration: 1s;
-    // animation-fill-mode: both;
-
-    .modal-content {
-      background: #fff;
-      width: 600rpx;
-      height: 300rpx;
-      border-radius: 10rpx;
-    }
-
-    .modal-body {
-      height: 200rpx;
-      line-height: 200rpx;
-      text-align: center;
-      font-weight: 500;
-      font-size: 35rpx;
-    }
-
-    .modal-footer {
-      display: flex;
-      height: 100rpx;
-
-      .button {
-        height: 100rpx;
-        line-height: 100rpx;
-        flex: 1;
-        text-align: center;
-        border-top: 2px solid #e3e0e0;
-        font-weight: 500;
-        font-size: 35rpx;
-      }
-
-      .confirm {
-        border-left: 2px solid #e3e0e0;
-        color: #3a5dcf
-      }
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

src/plugin/pages/miniWeb/index.tsx

@@ -1,58 +0,0 @@
-import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
-import React, { useState } from 'react'
-import './index.less'
-import { useDidShow, useUnload } from '@tarojs/taro'
-let count = 0
-
-const MiniWeb: React.FC = () => {
-  const [showModal, setShowModal] = useState(false)
-
-  useDidShow(() => {
-    count++
-    if (count < 2) {
-      setShowModal(true)
-    } else {
-      Taro.navigateBack()
-    }
-  })
-
-  useUnload(() => {
-    count = 0
-  })
-
-  function btnClick() {
-    Taro.openEmbeddedMiniProgram({
-      appId: 'wxdd07a068bf2e6ef4',
-      path: 'pages/middlepage/middlepage?paramKey=fdc2ab9b532143aea717520b5f9b8f10'
-    })
-  }
-
-  function onCancel() {
-    Taro.navigateBack()
-  }
-
-  function onConfirm() {
-    setShowModal(false)
-    btnClick()
-  }
-
-  return (
-    <View className='mini-web'>
-      {showModal && <View className='modal'>
-        <View className='modal-content'>
-          <View className='modal-body'>
-            是否打开半屏小程序
-          </View>
-          <View className='modal-footer'>
-            <View className='button cancel' onClick={onCancel}>取消</View>
-            <View className='button confirm' onClick={onConfirm}>确认</View>
-          </View>
-        </View>
-      </View>}
-      半屏小程序
-    </View>
-  )
-}
-
-export default MiniWeb

src/plugin/pages/webview/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-
-}

src/plugin/pages/webview/index.tsx

@@ -1,32 +0,0 @@
-import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
-import React from 'react'
-import './index.less'
-import { useDidShow, useUnload } from '@tarojs/taro'
-
-let count = 0
-const Webview: React.FC = () => {
-  useDidShow(() => {
-    Taro.navigateToMiniProgram({
-      appId: 'wxdd07a068bf2e6ef4',
-      path: 'pages/middlepage/middlepage?paramKey=fdc2ab9b532143aea717520b5f9b8f10'
-    })
-    count++
-    console.log(count)
-
-    if (count > 1) {
-      Taro.navigateBack()
-    }
-  })
-
-  useUnload(() => {
-    count = 0
-  })
-  return (
-    <View>
-      全屏小程序
-    </View>
-  )
-}
-
-export default Webview

src/plugin/plugin.json

@@ -4,9 +4,6 @@
     "calendar": "components/calendar/index"
   },
   "pages": {
-    "webview": "pages/webview/index",
-    "miniWeb": "pages/miniWeb/index",
-    "customPage": "pages/customPage/index"
   },
   "main": "index.ts"
 }

types/global.d.ts

@@ -19,7 +19,7 @@ declare namespace NodeJS {
 
 declare namespace JSX {
   interface IntrinsicElements {
-    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { width?: string, props: any }
+    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { props?: any }
 
     calendar: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
   }
@@ -27,6 +27,12 @@ declare namespace JSX {
 
 declare const wx
 
+declare namespace Taro {
+  interface TaroStatic {
+    $global: any
+  }
+}
+
 type CustomPropsType = {
   adpId: number
   autoplay?: boolean
@@ -48,3 +54,25 @@ type CustomPropsType = {
   onClick?(): void
   onClose?(): void
 }
+
+type ConfigType = {
+  header?: {},
+  method?: 'GET' | 'POST',
+  timeout?: number
+}
+
+type DataType = {
+  [key: string]: any
+  baseInfo?: object
+}
+
+type HttpInstanceType = {
+  get(url: string, data?: {}, config?: ConfigType): Promise<any>
+  post(url: string, data?: {}, config?: ConfigType): Promise<any>
+}
+
+interface RequestType {
+  code: number,
+  data: any,
+  msg: string
+}