Skip to content

Commit

Permalink
introductio
Browse files Browse the repository at this point in the history
  • Loading branch information
@Duslia
Duslia committed Feb 17, 2019
1 parent 8b07ab5 commit afdd284
Show file tree
Hide file tree
Showing 8 changed files with 386 additions and 302 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@tarojs/taro-h5": "^1.2.0-beta.7",
"@tarojs/taro-swan": "^1.2.0-beta.7",
"@tarojs/taro-weapp": "^1.2.0-beta.7",
"flyio": "^0.6.13",
"nerv-devtools": "^1.3.9",
"nervjs": "^1.3.9",
"taro-ui": "^1.5.4"
Expand Down
5 changes: 3 additions & 2 deletions project.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
"description": "",
"appid": "wx4fbf3fa15a2d348c",
"setting": {
"urlCheck": true,
"urlCheck": false,
"es6": false,
"postcss": false,
"minified": false,
"newFeature": true
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"condition": {}
Expand Down
14 changes: 8 additions & 6 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index'

import Fly from 'flyio/dist/npm/wx'
import './app.scss'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
// require('nerv-devtools')
// }

class App extends Component {

/**
Expand All @@ -20,8 +19,9 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/test/index',
'pages/index/index',
'pages/test/index',



],
Expand All @@ -32,13 +32,15 @@ class App extends Component {
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black',

},
permission: {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}

componentDidMount () {
wx.cloud.init({
traceUser: true
})
}

componentDidShow () {
Expand Down
49 changes: 46 additions & 3 deletions src/pages/index/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,46 @@
.canvas {

}
.page {
display:flex;
flex-flow:column nowrap;
background-color:rgb(220,220,220);
width:100%;
height:100%;
.swiper {
position:fixed !important;
width:100%;
}
.box1 {
display:flex !important;

width:100%;
}
.introductionContainer{
background-color:rgb(220,220,220);
display:flex;
flex-flow: column wrap;
align-items: center;
.introduction {
padding-top:20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: white;
width:90%;
display:flex;
flex-flow: column nowrap;
.title {
font-size:70px;
padding-left:40px;
padding-bottom: 15px;
}
.wordContentContainer {
display:flex;
justify-content: center;

.wordContent {
padding-top:15px;
width:90%;
}
}

}
}
}
220 changes: 90 additions & 130 deletions src/pages/index/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Canvas, Image,Text} from '@tarojs/components'
import{AtButton} from 'taro-ui'
import mapMark from '../../static/mapMark.png'
import { View, Swiper, SwiperItem,Text } from '@tarojs/components'
import './index.scss'
import Fly from 'flyio/dist/npm/wx'
export default class Index extends Component {

/**
Expand All @@ -13,128 +12,77 @@ export default class Index extends Component {
* 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
*/
config: Config = {
navigationBarTitleText: '首页'
}

state= {
touch: {
distance: 0,
scale: 1,
baseWidth: 1500,
baseHeight: 500,
scaleWidth: 1500,
scaleHeight:500
}
navigationBarTitleText: '智慧神泉',

}
componentWillMount () {}
context = Taro.createCanvasContext('canvas', this.$scope)
componentDidMount () {
this.context.setFillStyle('rgba(255, 255, 255, 0)')
this.context.fill()
this.context.drawImage(mapMark,100,100)
this.context.draw()
// var devices:Taro.onBeaconUpdate.ParamParamPropBeaconsItem[] = [];
// var info = {
// uuids:["fda50693-a4e2-4fb1-afcf-c6eb07647826"]
// };
// Taro.startBeaconDiscovery(info).then(()=>{
// console.log("开始扫描设备...");
// // 监听iBeacon信号
// Taro.onBeaconUpdate(function (res) {
// // 请注意，官方文档此处又有BUG，是res.beacons，不是beacons。
// if (res && res.beacons && res.beacons.length > 0) {
// console.log(res.beacons)
// console.log(devices);
// devices = res.beacons
// // 此处最好检测rssi是否等于0，等于0的话信号强度等信息不准确。我是5秒内重复扫描排重。
// }
// });
// })

// //超时停止扫描
// setTimeout(function () {
// Taro.stopBeaconDiscovery({
// success: function () {
// console.log("停止设备扫描！");
// console.log(devices);
// }
// });
// }, 5 * 1000);
}
touchstartCallback(e) {
// 单手指缩放开始，也不做任何处理
if(e.touches.length == 1) return
console.log('双手指触发开始')
// 注意touchstartCallback 真正代码的开始
// 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug
// 当两根手指放上去的时候，就将distance 初始化。
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.setState({
touch: {
...this.state.touch,
distance: distance
}
})

}
touchmoveCallback(e) {
state= {
isShow:0,
width:375,
height:281.25,
audio:0,

// 单手指缩放我们不做任何操作
if(e.touches.length == 1) return
console.log('双手指运动')
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
// 新的 ditance
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
let distanceDiff = distance - this.state.touch.distance;
let newScale = this.state.touch.scale + 0.005 * distanceDiff
// 为了防止缩放得太大，所以scale需要限制，同理最小值也是
if(newScale >= 2) {
newScale = 2
}
if(newScale <= 0.6) {
newScale = 0.6
}
let scaleWidth = newScale * this.state.touch.baseWidth
let scaleHeight = newScale * this.state.touch.baseHeight
console.log(111,scaleHeight,scaleWidth);
// 赋值 新的 => 旧的
this.setState({
touch:
{
...this.state.touch,
distance: distance,
scale: newScale,
scaleWidth: scaleWidth,
scaleHeight: scaleHeight,
diff: distanceDiff
}
imageUrl: any[] = []
const fly=new Fly;
name:"";
wordContent:"";
innerAudioContext = Taro.createInnerAudioContext();
componentWillMount () {
var that = this;
Taro.getSystemInfo({
success: function(res) {
let swiperHeight;
console.log(res)
swiperHeight = res.windowWidth/4*3;
console.log(res)
console.log(swiperHeight)
that.setState({
...that.state,
width:res.windowWidth,
height:this.swiperHeight
})
}
});
let { id } = this.$router.params
this.fly.get("http://39.98.84.18/api/attraction/1/").then( d =>{
console.log(d["data"])
// that.setState({
// ...that.state,
// name: d["data"].name,
// wordContent: d["data"].description
// })
that.name= d["data"].name,
that.wordContent= d["data"].description
if(d["data"].pic.length) {
that.setState({
...that.state,
isShow:1,
})
d["data"]["pic"].forEach(element => {
that.imageUrl.push(element.pic)
});
}
if(d["data"].audio) {
that.setState({
...that.state,
audio:1
})
console.log(1111)
that.innerAudioContext.src = d["data"].audio;
}
})
}
bindload(e) {
console.log(111,e,12324)

// bindload 这个api是<image>组件的api类似<img>的onload属性
this.setState({
touch:{
...this.state.touch,
baseWidth: e.detail.width,
baseHeight: e.detail.height,
scaleWidth: e.detail.width,
scaleHeight: e.detail.height
}
})
}

componentDidMount () {

}
componentWillUnmount () {

}
innerAudioContext = Taro.createInnerAudioContext()

playOn() {

this.innerAudioContext.src = 'cloud://test-70b991.7465-test-70b991/voice/20180723 210558.m4a';

this.innerAudioContext.autoplay = true
    this.innerAudioContext.onPlay(() => {
       console.log('录音播放中');
Expand All @@ -155,23 +103,35 @@ export default class Index extends Component {
componentDidHide () { }

render () {
const listItems = this.imageUrl.map((url) => {
return <SwiperItem key={url}>
<Image src={url} style="width:{{width}}px;height:150px"></Image>
</SwiperItem>
})
return (


<View
className='canvas'
onTouchMove={this.touchmoveCallback}
onTouchStart={this.touchstartCallback}
style='width=180px;height=130px;'
>
{/* <Canvas canvasId='canvs' style="background-image:url('https://7465-test-70b991-1258348028.tcb.qcloud.la/03chaojing.jpg?sign=94460181c6f3fbde63c644c329aae4ef&t=1546063831');width=180px;height=130px;background-size:180px 130px;"></Canvas> */}
{/* <Text>Hello world!</Text>
<AtButton onClick={this.playOn}>开始播放</AtButton>
<AtButton onClick={this.playPause}>播放暂停</AtButton> */}
<Image src='https://7465-test-70b991-1258348028.tcb.qcloud.la/03chaojing.jpg?sign=94460181c6f3fbde63c644c329aae4ef&t=1546063831' onTouchMove={this.touchmoveCallback} >
{/* onTouchStart={this.touchstartCallback} style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px;z-index:-100;" onLoad={this.bindload}> */}
{/* <Canvas style="background-image:url('https://7465-test-70b991-1258348028.tcb.qcloud.la/03chaojing.jpg?sign=94460181c6f3fbde63c644c329aae4ef&t=1546063831');background-size: {{ touch.scaleWidth }}px {{ touch.scaleHeight }}px;width:{{ touch.scaleWidth }}px;left:-1000px;height: {{ touch.scaleHeight }}px;z-index:100;" canvasId='canvas'></Canvas> */}
</Image>
<View className='page'>
{this.state.isShow &&
<Swiper
indicatorColor='#999'
indicatorActiveColor='#333'
circular
indicatorDots
autoplay
className='swiper'
>
{listItems}
</Swiper>
}
<View className="box1"></View>
<View className="introductionContainer">
<View className="introduction">
<Text className="title">{this.name}</Text>
{/* <View style="width:800px;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></View> */}
<View className="wordContentContainer">
<Text className="wordContent">{this.wordContent}</Text>
</View>
</View>
</View>
</View>

)
Expand Down
Loading

0 comments on commit afdd284

Please sign in to comment.