Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit fa424882 by lirandong
Options

添加 微信小程序端

parent d95c2a97
Showing with 241 additions and 59 deletions
.stylelintrc.js
...@@ -8,6 +8,7 @@ module.exports = { ...@@ -8,6 +8,7 @@ module.exports = {
indentation: 2, indentation: 2,
'no-empty-source': null, 'no-empty-source': null,
'at-rule-no-unknown': 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 @@ ...@@ -40,39 +40,40 @@
"@tarojs/taro-tt": "1.3.12", "@tarojs/taro-tt": "1.3.12",
"@tarojs/taro-weapp": "1.3.12", "@tarojs/taro-weapp": "1.3.12",
"axios": "^0.19.0", "axios": "^0.19.0",
"nervjs": "^1.4.0",
"nerv-devtools": "^1.4.0", "nerv-devtools": "^1.4.0",
"nervjs": "^1.4.0",
"redux": "^4.0.0", "redux": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"taro-axios": "^0.5.0",
"tslib": "^1.8.0" "tslib": "^1.8.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"@tarojs/plugin-babel": "1.3.12", "@tarojs/plugin-babel": "1.3.12",
"@tarojs/plugin-csso": "1.3.12", "@tarojs/plugin-csso": "1.3.12",
"@tarojs/plugin-less": "1.3.12", "@tarojs/plugin-less": "1.3.12",
"@tarojs/plugin-uglifyjs": "1.3.12", "@tarojs/plugin-uglifyjs": "1.3.12",
"@tarojs/webpack-runner": "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-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5", "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"babel-eslint": "^8.2.3",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-taro": "1.3.12", "eslint-config-taro": "1.3.12",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2", "eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^1.6.1", "eslint-plugin-react-hooks": "^1.6.1",
"eslint-plugin-import": "^2.12.0", "eslint-plugin-taro": "1.3.12",
"husky": "^3.0.2", "husky": "^3.0.2",
"stylelint": "9.3.0", "stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0", "stylelint-config-standard": "^18.3.0",
"stylelint-config-taro-rn": "1.3.12", "stylelint-config-taro-rn": "1.3.12",
"stylelint-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": "^5.17.0",
"tslint-react": "^4.0.0", "tslint-react": "^4.0.0",
"typescript": "^3.0.1" "typescript": "^3.0.1"
......
src/api/axios.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// import { concatParam } from '@/utils/utils' // import { concatParam } from '@/utils/utils'
import { concatParam } from '../constants/utils' import { concatParam } from '../constants/utils'
// import $config, { message, requestCode, tokens } from '@/config' // 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 { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '../constants/counter'
import token from '../constants/token' import token from '../constants/token'
...@@ -23,6 +23,14 @@ $axios.interceptors.request.use((config: any) => { ...@@ -23,6 +23,14 @@ $axios.interceptors.request.use((config: any) => {
// 设置token // 设置token
if (!noToken) { if (!noToken) {
// 默认添加token // 默认添加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() config.headers.visualToken = token.getToken()
} else { } else {
delete config.headers.noToken delete config.headers.noToken
...@@ -49,6 +57,7 @@ $axios.interceptors.request.use((config: any) => { ...@@ -49,6 +57,7 @@ $axios.interceptors.request.use((config: any) => {
FetchSet.add(config.FetchKey) // 添加请求key到防重复容器 FetchSet.add(config.FetchKey) // 添加请求key到防重复容器
delete config.headers.repeat // 删除标识 delete config.headers.repeat // 删除标识
} }
// console.log(1111, { config })
return config return config
}) })
...@@ -62,7 +71,6 @@ $axios.interceptors.response.use( ...@@ -62,7 +71,6 @@ $axios.interceptors.response.use(
// if (!data || !data.code) return Promise.reject(config) // if (!data || !data.code) return Promise.reject(config)
const { code } = data const { code } = data
// console.log({ config }) // console.log({ config })
console.log(!!code && code !== 0)
if (!!code && code !== 0) return Promise.reject(config.data) if (!!code && code !== 0) return Promise.reject(config.data)
return data return data
// if (code === '0') { // if (code === '0') {
...@@ -82,7 +90,8 @@ $axios.interceptors.response.use( ...@@ -82,7 +90,8 @@ $axios.interceptors.response.use(
// } // }
}, },
async (error: any) => { async (error: any) => {
const { config } = error const { config, stack } = error
console.log({ stack })
if (config && config.FetchKey) { if (config && config.FetchKey) {
// 取消当前接口的防重复请求限制 // 取消当前接口的防重复请求限制
FetchSet.delete(config.FetchKey) FetchSet.delete(config.FetchKey)
......
src/api/common.ts
...@@ -5,6 +5,10 @@ class UsersApi extends ApiClient { ...@@ -5,6 +5,10 @@ class UsersApi extends ApiClient {
getTempList(page: number) { getTempList(page: number) {
return this.request({ method: 'POST', url: `/template/get/list`, data: { p: page, c: 10 } }) 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() 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 '@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 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 token from './constants/token'
import './app.less'
// 如果需要在 h5 环境中开启 React Devtools // 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释： // 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') { // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
...@@ -18,6 +22,7 @@ import token from './constants/token' ...@@ -18,6 +22,7 @@ import token from './constants/token'
})() })()
const store = configStore() const store = configStore()
class App extends Component { class App extends Component {
/** /**
* 指定config的类型声明为: Taro.Config * 指定config的类型声明为: Taro.Config
...@@ -28,18 +33,18 @@ class App extends Component { ...@@ -28,18 +33,18 @@ class App extends Component {
*/ */
config: Config = { config: Config = {
pages: [ pages: [
'pages/home/tempaltes/index',
'pages/home/index',
'pages/index/index', 'pages/index/index',
// 'pages/login/index',
// 'pages/home/index',
'pages/home/device/index', 'pages/home/device/index',
'pages/home/tempaltes/index', 'pages/home/user/index',
'pages/home/user/index' 'pages/home/tempaltes/detail'
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
navigationBarTextStyle: 'black', navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'Taro Demo', navigationBarTitleText: 'WeChat',
navigationBarBackgroundColor: '#fff' navigationBarTextStyle: 'black'
}, },
tabBar: { tabBar: {
list: [ list: [
...@@ -65,6 +70,13 @@ class App extends Component { ...@@ -65,6 +70,13 @@ class App extends Component {
} }
} }
// componentWillMount() {
// setTimeout(() => {
// // Taro.login()
// Taro.navigateTo({ url: '/pages/index/index' })
// }, 2000)
// }
// 在 App 类中的 render() 函数没有实际作用 // 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数 // 请勿修改此函数
render() { render() {
...@@ -75,3 +87,5 @@ class App extends Component { ...@@ -75,3 +87,5 @@ class App extends Component {
) )
} }
} }
// Taro.render(<App />, document.getElementById('app'))
src/constants/components/less/pageView.less 0 → 100644
.pageView {
width: 100%;
height: 100%;
box-sizing: border-box;
}
src/constants/components/pageView.tsx 0 → 100644
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 { ...@@ -9,7 +9,6 @@ class Token {
init() { init() {
if (!this.initDone) { if (!this.initDone) {
this.initDone = true this.initDone = true
console.log('init')
return this.getStorageToken() return this.getStorageToken()
} }
} }
...@@ -31,8 +30,9 @@ class Token { ...@@ -31,8 +30,9 @@ class Token {
async getStorageToken() { async getStorageToken() {
try { try {
const { data } = await MyStorage.getItem({ key: 'token' }) // const { data } = await MyStorage.getItem({ key: 'token' })
console.log({ data }) const res = await MyStorage.getItem({ key: 'token' })
console.log({ res })
// if (!!data) this.token = data // if (!!data) this.token = data
} catch (error) { } catch (error) {
console.warn('获取本地 token 失败~', error) console.warn('获取本地 token 失败~', error)
......
src/constants/utils.ts
...@@ -11,10 +11,10 @@ export function concatParam(data: any): string { ...@@ -11,10 +11,10 @@ export function concatParam(data: any): string {
export const MyStorage = { export const MyStorage = {
async getItem({ key }) { async getItem({ key }) {
if (process.env.TARO_ENV === 'rn') { if (process.env.TARO_ENV === 'rn') {
const data = await AsyncStorage.getItem(key) // const data = await AsyncStorage.getItem(key)
return Promise.resolve({ data }) return await AsyncStorage.getItem(key)
} else { } else {
return Taro.getStorage({ key }) return Taro.getStorageSync(key)
} }
}, },
...@@ -22,7 +22,7 @@ export const MyStorage = { ...@@ -22,7 +22,7 @@ export const MyStorage = {
if (process.env.TARO_ENV === 'rn') { if (process.env.TARO_ENV === 'rn') {
return AsyncStorage.setItem(key, data) return AsyncStorage.setItem(key, data)
} else { } else {
return Taro.setStorage({ key, data }) return Taro.setStorageSync(key, data)
} }
} }
} }
...@@ -35,3 +35,7 @@ export function showErrorToast({ error, tips }: { error?: any; tips?: string }) ...@@ -35,3 +35,7 @@ export function showErrorToast({ error, tips }: { error?: any; tips?: string })
if (!error && !tips) return if (!error && !tips) return
Taro.showToast({ icon: 'none', title: error && error.msg ? error.msg : tips }) 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 0 → 100644
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 { ComponentClass } from 'react'
import TempItem from './temp_item/temp_item' import TempItem from './temp_item'
import Taro, { Component, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
import PageView from '../../../constants/components/pageView'
import { View, Text, Input, ScrollView, Image } from '@tarojs/components' import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
import './index.less' import './less/index.less'
import api from '../../../api' import api from '../../../api'
import token from '../../../constants/token'
type PageStateProps = {} type PageStateProps = {}
...@@ -32,7 +34,9 @@ interface Tempaltes { ...@@ -32,7 +34,9 @@ interface Tempaltes {
class Tempaltes extends Component { class Tempaltes extends Component {
config: Config = { config: Config = {
navigationStyle: 'custom' navigationBarTitleText: '',
// navigationStyle: 'custom'
navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
} }
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -45,6 +49,15 @@ class Tempaltes extends Component { ...@@ -45,6 +49,15 @@ class Tempaltes extends Component {
async componentWillMount() { async componentWillMount() {
try { 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) const { list, count } = await api.common.getTempList(this.state.page)
this.setState({ this.setState({
count, count,
...@@ -65,18 +78,25 @@ class Tempaltes extends Component { ...@@ -65,18 +78,25 @@ class Tempaltes extends Component {
const { dataList } = this.state const { dataList } = this.state
// console.warn({ dataList }) // console.warn({ dataList })
return ( return (
// <PageView>
<View className="tempaltes"> <View className="tempaltes">
<View className="search-bar"> <View className="search-bar">
<Input className="search" placeholder="请输入搜索关键词" /> <Input className="search" placeholder="请输入搜索关键词" />
</View> </View>
<View className="scroll-view-wrapper"> <View className="scroll-view-wrapper">
<ScrollView className="scroll-view"> <ScrollView className="scroll-view" scrollY>
{dataList.map(item => ( <View className="list-wrapper">
<TempItem {...item} key={item.templateId} /> {dataList.map(item => (
))} <TempItem {...item} key={item.templateId} />
))}
{/* <View />
<View />
<View /> */}
</View>
</ScrollView> </ScrollView>
</View> </View>
</View> </View>
// </PageView>
) )
} }
} }
......
src/pages/home/tempaltes/index.less → src/pages/home/tempaltes/less/index.less
.tempaltes { .tempaltes {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
flex-direction: column; flex-direction: column;
background-color: #f7f7f7;
} }
.search-bar { .search-bar {
height: 50; height: 120px;
padding-top: 10; padding-top: 20px;
padding-bottom: 10; padding-left: 24px;
padding-left: 12; padding-right: 20px;
padding-right: 12; padding-bottom: 24px;
box-sizing: border-box;
background-color: white; background-color: white;
} }
.search { .search {
padding: 0; padding: 0;
width: 100%;
height: 100%; height: 100%;
padding-left: 10; font-size: 26px;
color: #969799; color: #969799;
padding-left: 20px;
box-sizing: border-box;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.scroll-view-wrapper { .scroll-view-wrapper {
flex: 1; flex: 1;
height: 100; overflow: hidden;
} }
.scroll-view { .scroll-view {
width: 100%;
height: 100%; height: 100%;
// display: flex; padding-top: 20px;
// flex-wrap: wrap; padding-left: 20px;
// flex-direction: row; padding-right: 20px;
padding-left: 10; box-sizing: border-box;
padding-right: 10; // height: calc(100% - 120px);
} }
.list-wrapper { .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 0 → 100644
.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 { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro' import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components' import { View, Text, Image } from '@tarojs/components'
import './temp_item.less' import './less/temp_item.less'
import { ITempItem } from '..' import { ITempItem } from '.'
type IProps = ITempItem type IProps = ITempItem
...@@ -12,15 +12,21 @@ interface PageOwnProps {} ...@@ -12,15 +12,21 @@ interface PageOwnProps {}
interface TempItem { interface TempItem {
props: IProps props: IProps
state: PageState 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 { class TempItem extends Component {
goDetail = () => {
const templateId = this.props
Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
}
render() { render() {
const { templateName, templateUrl: url } = this.props const { templateName, templateUrl: url } = this.props
return ( return (
<View className="temp-item"> <View className="temp-item" onClick={this.goDetail}>
<Image src={url} /> <Image lazyLoad className="temp-img" src={url} />
<Text>{templateName}</Text> <Text className="temp-name">{templateName}</Text>
</View> </View>
) )
} }
......
src/pages/home/tempaltes/temp_item/temp_item.less deleted 100644 → 0
.temp-item {
// self
width: 50%;
// background-color: black;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment