添加 微信小程序端

.stylelintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     indentation: 2,
     'no-empty-source': null,
     'at-rule-no-unknown': null,
-    'no-descending-specificity': null
+    'no-descending-specificity': null,
+    'selector-type-no-unknown': null
   }
 }
\ No newline at end of file

package.json

@@ -40,39 +40,40 @@
     "@tarojs/taro-tt": "1.3.12",
     "@tarojs/taro-weapp": "1.3.12",
     "axios": "^0.19.0",
-    "nervjs": "^1.4.0",
     "nerv-devtools": "^1.4.0",
+    "nervjs": "^1.4.0",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
+    "taro-axios": "^0.5.0",
     "tslib": "^1.8.0"
   },
   "devDependencies": {
-    "@types/react": "^16.4.8",
-    "@types/webpack-env": "^1.13.6",
     "@tarojs/plugin-babel": "1.3.12",
     "@tarojs/plugin-csso": "1.3.12",
     "@tarojs/plugin-less": "1.3.12",
     "@tarojs/plugin-uglifyjs": "1.3.12",
     "@tarojs/webpack-runner": "1.3.12",
+    "@types/react": "^16.4.8",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/parser": "^1.6.0",
+    "babel-eslint": "^8.2.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
-    "babel-eslint": "^8.2.3",
     "eslint": "^5.16.0",
     "eslint-config-taro": "1.3.12",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-taro": "1.3.12",
     "husky": "^3.0.2",
-    "stylelint": "9.3.0",
+    "stylelint": "^10.1.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-config-taro-rn": "1.3.12",
     "stylelint-taro-rn": "1.3.12",
-    "eslint-plugin-taro": "1.3.12",
-    "@typescript-eslint/parser": "^1.6.0",
     "tslint": "^5.17.0",
     "tslint-react": "^4.0.0",
     "typescript": "^3.0.1"

src/api/axios.ts

@@ -2,7 +2,7 @@
 // import { concatParam } from '@/utils/utils'
 import { concatParam } from '../constants/utils'
 // import $config, { message, requestCode, tokens } from '@/config'
-import axios, { CancelTokenStatic, AxiosInstance } from 'axios'
+import { axios, CancelTokenStatic, AxiosInstance } from 'taro-axios'
 import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '../constants/counter'
 import token from '../constants/token'
 
@@ -23,6 +23,14 @@ $axios.interceptors.request.use((config: any) => {
   // 设置token
   if (!noToken) {
     // 默认添加token
+    const tokne = token.getToken()
+    if (!tokne) {
+      config.cancelToken = new CancelToken(cancel => {
+        console.warn(`token 为空取消请求~`)
+        cancel(INTERFACE_REPEAT)
+      })
+      return config
+    }
     config.headers.visualToken = token.getToken()
   } else {
     delete config.headers.noToken
@@ -49,6 +57,7 @@ $axios.interceptors.request.use((config: any) => {
     FetchSet.add(config.FetchKey) // 添加请求key到防重复容器
     delete config.headers.repeat // 删除标识
   }
+  // console.log(1111, { config })
   return config
 })
 
@@ -62,7 +71,6 @@ $axios.interceptors.response.use(
     // if (!data || !data.code) return Promise.reject(config)
     const { code } = data
     // console.log({ config })
-    console.log(!!code && code !== 0)
     if (!!code && code !== 0) return Promise.reject(config.data)
     return data
     // if (code === '0') {
@@ -82,7 +90,8 @@ $axios.interceptors.response.use(
     // }
   },
   async (error: any) => {
-    const { config } = error
+    const { config, stack } = error
+    console.log({ stack })
     if (config && config.FetchKey) {
       // 取消当前接口的防重复请求限制
       FetchSet.delete(config.FetchKey)

src/api/common.ts

@@ -5,6 +5,10 @@ class UsersApi extends ApiClient {
   getTempList(page: number) {
     return this.request({ method: 'POST', url: `/template/get/list`, data: { p: page, c: 10 } })
   }
+
+  getTempDetail(id: string, page: number) {
+    return this.request({ method: 'GET', url: `/template/get/film/list/${id}?p=${page}&c=10` })
+  }
 }
 
 export default new UsersApi()

src/app.less

+view {
+  // display: flex;
+  // box-sizing: border-box;
+}
+
+page {
+  width: 100%;
+  height: 100%;
+}

src/app.tsx

 import '@tarojs/async-await'
-import configStore from './store'
-import Index from './pages/index'
-import { Provider } from '@tarojs/redux'
 import Taro, { Component, Config } from '@tarojs/taro'
+import { Provider } from '@tarojs/redux'
+
+import Index from './pages/index'
+
+import configStore from './store'
 import token from './constants/token'
 
+import './app.less'
+
 // 如果需要在 h5 环境中开启 React Devtools
 // 取消以下注释：
 // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
@@ -18,6 +22,7 @@ import token from './constants/token'
 })()
 
 const store = configStore()
+
 class App extends Component {
   /**
    * 指定config的类型声明为: Taro.Config
@@ -28,18 +33,18 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/home/tempaltes/index',
+      'pages/home/index',
       'pages/index/index',
-      // 'pages/login/index',
-      // 'pages/home/index',
       'pages/home/device/index',
-      'pages/home/tempaltes/index',
-      'pages/home/user/index'
+      'pages/home/user/index',
+      'pages/home/tempaltes/detail'
     ],
     window: {
       backgroundTextStyle: 'light',
-      navigationBarTextStyle: 'black',
-      navigationBarTitleText: 'Taro Demo',
-      navigationBarBackgroundColor: '#fff'
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black'
     },
     tabBar: {
       list: [
@@ -65,6 +70,13 @@ class App extends Component {
     }
   }
 
+  // componentWillMount() {
+  //   setTimeout(() => {
+  //     // Taro.login()
+  //     Taro.navigateTo({ url: '/pages/index/index' })
+  //   }, 2000)
+  // }
+
   // 在 App 类中的 render() 函数没有实际作用
   // 请勿修改此函数
   render() {
@@ -75,3 +87,5 @@ class App extends Component {
     )
   }
 }
+
+// Taro.render(<App />, document.getElementById('app'))

src/constants/components/less/pageView.less

+.pageView {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

src/constants/components/pageView.tsx

+import { ComponentClass } from 'react'
+import { View } from '@tarojs/components'
+import Taro, { Component } from '@tarojs/taro'
+import { getStatusBarHeight } from '../utils'
+
+import './less/pageView.less'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  children: any
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface PageView {
+  props: IProps
+  state: PageState
+}
+
+class PageView extends Component {
+  render() {
+    const StatusBarHeight = getStatusBarHeight()
+    return (
+      <View className="pageView" style={{ paddingTop: `${StatusBarHeight}px` }}>
+        {this.props.children}
+      </View>
+    )
+  }
+}
+export default PageView as ComponentClass<PageOwnProps, PageState>

src/constants/token.ts

@@ -9,7 +9,6 @@ class Token {
   init() {
     if (!this.initDone) {
       this.initDone = true
-      console.log('init')
       return this.getStorageToken()
     }
   }
@@ -31,8 +30,9 @@ class Token {
 
   async getStorageToken() {
     try {
-      const { data } = await MyStorage.getItem({ key: 'token' })
-      console.log({ data })
+      // const { data } = await MyStorage.getItem({ key: 'token' })
+      const res = await MyStorage.getItem({ key: 'token' })
+      console.log({ res })
       // if (!!data) this.token = data
     } catch (error) {
       console.warn('获取本地 token 失败~', error)

src/constants/utils.ts

@@ -11,10 +11,10 @@ export function concatParam(data: any): string {
 export const MyStorage = {
   async getItem({ key }) {
     if (process.env.TARO_ENV === 'rn') {
-      const data = await AsyncStorage.getItem(key)
-      return Promise.resolve({ data })
+      // const data = await AsyncStorage.getItem(key)
+      return await AsyncStorage.getItem(key)
     } else {
-      return Taro.getStorage({ key })
+      return Taro.getStorageSync(key)
     }
   },
 
@@ -22,7 +22,7 @@ export const MyStorage = {
     if (process.env.TARO_ENV === 'rn') {
       return AsyncStorage.setItem(key, data)
     } else {
-      return Taro.setStorage({ key, data })
+      return Taro.setStorageSync(key, data)
     }
   }
 }
@@ -35,3 +35,7 @@ export function showErrorToast({ error, tips }: { error?: any; tips?: string })
   if (!error && !tips) return
   Taro.showToast({ icon: 'none', title: error && error.msg ? error.msg : tips })
 }
+
+export function getStatusBarHeight() {
+  return Taro.getSystemInfoSync().statusBarHeight + 46
+}

src/pages/home/tempaltes/detail.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import './less/detail.less'
+import api from '../../../api'
+import { ITempItem } from '.'
+type PageOwnProps = {}
+
+type PageState = {
+  page: 1
+}
+
+interface TempDetail {
+  props: ITempItem
+  state: PageState
+}
+
+class TempDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: '模板详情'
+  }
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1
+    }
+  }
+
+  async componentWillMount() {
+    const { templateId } = this.props
+    const res = await api.common.getTempDetail(templateId, 1)
+    console.log({ res })
+  }
+
+  render() {
+    // console.log(window)
+    return (
+      <View className="TempDetail">
+        <Text>hello world</Text>
+      </View>
+    )
+  }
+}
+export default TempDetail as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/index.tsx

 import { ComponentClass } from 'react'
-import TempItem from './temp_item/temp_item'
+import TempItem from './temp_item'
 import Taro, { Component, Config } from '@tarojs/taro'
+import PageView from '../../../constants/components/pageView'
 import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
-import './index.less'
+import './less/index.less'
 import api from '../../../api'
+import token from '../../../constants/token'
 
 type PageStateProps = {}
 
@@ -32,7 +34,9 @@ interface Tempaltes {
 
 class Tempaltes extends Component {
   config: Config = {
-    navigationStyle: 'custom'
+    navigationBarTitleText: '',
+    // navigationStyle: 'custom'
+    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
   }
   constructor(props) {
     super(props)
@@ -45,6 +49,15 @@ class Tempaltes extends Component {
 
   async componentWillMount() {
     try {
+      // console.log('componentWillMount', )
+      // Taro.getStorage({ key: 'tokne' })
+      //   .then(res => {
+      //     console.log({ res })
+      //   })
+      //   .catch(error => {
+      //     console.log({ error })
+      //   })
+      // console.log('token.getToken()', token.getToken())
       const { list, count } = await api.common.getTempList(this.state.page)
       this.setState({
         count,
@@ -65,18 +78,25 @@ class Tempaltes extends Component {
     const { dataList } = this.state
     // console.warn({ dataList })
     return (
+      // <PageView>
       <View className="tempaltes">
         <View className="search-bar">
           <Input className="search" placeholder="请输入搜索关键词" />
         </View>
         <View className="scroll-view-wrapper">
-          <ScrollView className="scroll-view">
+          <ScrollView className="scroll-view" scrollY>
+            <View className="list-wrapper">
               {dataList.map(item => (
                 <TempItem {...item} key={item.templateId} />
               ))}
+              {/* <View />
+              <View />
+              <View /> */}
+            </View>
           </ScrollView>
         </View>
       </View>
+      // </PageView>
     )
   }
 }

src/pages/home/tempaltes/index.less → src/pages/home/tempaltes/less/index.less

 .tempaltes {
   width: 100%;
   height: 100%;
+  display: flex;
   flex-direction: column;
+  background-color: #f7f7f7;
 }
 
 .search-bar {
-  height: 50;
-  padding-top: 10;
-  padding-bottom: 10;
-  padding-left: 12;
-  padding-right: 12;
+  height: 120px;
+  padding-top: 20px;
+  padding-left: 24px;
+  padding-right: 20px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
   background-color: white;
 }
 
 .search {
   padding: 0;
+  width: 100%;
   height: 100%;
-  padding-left: 10;
+  font-size: 26px;
   color: #969799;
+  padding-left: 20px;
+  box-sizing: border-box;
   background-color: #f7f8fa;
 }
 
 .scroll-view-wrapper {
   flex: 1;
-  height: 100;
+  overflow: hidden;
 }
 
 .scroll-view {
+  width: 100%;
   height: 100%;
-  // display: flex;
-  // flex-wrap: wrap;
-  // flex-direction: row;
-  padding-left: 10;
-  padding-right: 10;
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  box-sizing: border-box;
+  // height: calc(100% - 120px);
 }
 
 .list-wrapper {
-  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
+
+// .scroll-view::after {
+//   content: '';
+//   clear: both;
+//   display: block;
+// }

src/pages/home/tempaltes/less/temp_item.less

+.temp-item {
+  width: 345px;
+  margin-bottom: 20px;
+}
+
+.temp-img {
+  width: 100%;
+  height: 185px;
+  display: block;
+  background-color: #ccc;
+}
+
+.temp-name {
+  width: 100%;
+  display: block;
+  font-size: 28px;
+  background-color: white;
+  padding: 10px 0 10px 10px;
+}

src/pages/home/tempaltes/temp_item/temp_item.tsx → src/pages/home/tempaltes/temp_item.tsx

 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
-import './temp_item.less'
-import { ITempItem } from '..'
+import './less/temp_item.less'
+import { ITempItem } from '.'
 
 type IProps = ITempItem
 
@@ -12,15 +12,21 @@ interface PageOwnProps {}
 interface TempItem {
   props: IProps
   state: PageState
+  // "navigateTo:fail page "pages/home/tempaltes/pages/home/tempaltes/detail?templateId=%5Bobject%20Object%5D&__key_=15656132800593" is not found"
 }
 
 class TempItem extends Component {
+  goDetail = () => {
+    const templateId = this.props
+    Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
+  }
+
   render() {
     const { templateName, templateUrl: url } = this.props
     return (
-      <View className="temp-item">
-        <Image src={url} />
-        <Text>{templateName}</Text>
+      <View className="temp-item" onClick={this.goDetail}>
+        <Image lazyLoad className="temp-img" src={url} />
+        <Text className="temp-name">{templateName}</Text>
       </View>
     )
   }

src/pages/home/tempaltes/temp_item/temp_item.less

-.temp-item {
-  // self
-  width: 50%;
-  // background-color: black;
-}