作者 liaolinfeng

2018 9 13

//app.js
App({
post(url, data) {
/**
* 自定义post函数,返回Promise
* +-------------------
* @param {String} url 接口网址
* @param {arrayObject} data 要传的数组对象 like: {name: 'name', age: 32}
* +-------------------
* @return {Promise} promise 返回promise供后续操作
*/
wx.showNavigationBarLoading()
wx.showLoading({
title: '加载中',
})
var promise = new Promise((resolve, reject) => {
let that = this;
let postData = data;
let baseurl = 'http://soochow.w.bronet.cn/api/';//仅为实例地址
//发起网络请求
wx.request({
url: baseurl + url,
data: postData,
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: function (res) {//返回取得的数据
resolve(res.data);
setTimeout(function () {
wx.hideLoading()
}, 600)
wx.hideNavigationBarLoading()
},
error: function (e) {
reject("网络错误");
wx.hideLoading();
wx.hideNavigationBarLoading();
wx.showModal({
title: '提示',
content: res.data.msg,
showCancel: false
})
}
})
})
wx.hideLoading();
return promise;
},
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
... ...
{
"pages":[
"pages": [
"pages/start/start",
"pages/chooseadress/chooseadress",
"pages/poster/poster",
"pages/share_code/share_code",
"pages/record/record",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
"navigationBarTextStyle": "black"
}
}
}
\ No newline at end of file
... ...
不能预览此文件类型
function AMapWX(a){this.key=a.key,this.requestConfig={key:a.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"}}AMapWX.prototype.getWxLocation=function(a,b){wx.getLocation({type:"gcj02",success:function(a){var c=a.longitude+","+a.latitude;wx.setStorage({key:"userLocation",data:c}),b(c)},fail:function(c){wx.getStorage({key:"userLocation",success:function(a){a.data&&b(a.data)}}),a.fail({errCode:"0",errMsg:c.errMsg||""})}})},AMapWX.prototype.getRegeo=function(a){function c(c){var d=b.requestConfig;wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:b.key,location:c,extensions:"all",s:d.s,platform:d.platform,appname:b.key,sdkversion:d.sdkversion,logversion:d.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){var d,e,f,g,h,i,j,k,l;b.data.status&&"1"==b.data.status?(d=b.data.regeocode,e=d.addressComponent,f=[],g="",d&&d.roads[0]&&d.roads[0].name&&(g=d.roads[0].name+"附近"),h=c.split(",")[0],i=c.split(",")[1],d.pois&&d.pois[0]&&(g=d.pois[0].name+"附近",j=d.pois[0].location,j&&(h=parseFloat(j.split(",")[0]),i=parseFloat(j.split(",")[1]))),e.provice&&f.push(e.provice),e.city&&f.push(e.city),e.district&&f.push(e.district),e.streetNumber&&e.streetNumber.street&&e.streetNumber.number?(f.push(e.streetNumber.street),f.push(e.streetNumber.number)):(k="",d&&d.roads[0]&&d.roads[0].name&&(k=d.roads[0].name),f.push(k)),f=f.join(""),l=[{iconPath:a.iconPath,width:a.iconWidth,height:a.iconHeight,name:f,desc:g,longitude:h,latitude:i,id:0,regeocodeData:d}],a.success(l)):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}var b=this;a.location?c(a.location):b.getWxLocation(a,function(a){c(a)})},AMapWX.prototype.getWeather=function(a){function d(d){var e="base";a.type&&"forecast"==a.type&&(e="all"),wx.request({url:"https://restapi.amap.com/v3/weather/weatherInfo",data:{key:b.key,city:d,extensions:e,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){function c(a){var b={city:{text:"城市",data:a.city},weather:{text:"天气",data:a.weather},temperature:{text:"温度",data:a.temperature},winddirection:{text:"风向",data:a.winddirection+"风"},windpower:{text:"风力",data:a.windpower+"级"},humidity:{text:"湿度",data:a.humidity+"%"}};return b}var d,e;b.data.status&&"1"==b.data.status?b.data.lives?(d=b.data.lives,d&&d.length>0&&(d=d[0],e=c(d),e["liveData"]=d,a.success(e))):b.data.forecasts&&b.data.forecasts[0]&&a.success({forecast:b.data.forecasts[0]}):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}function e(e){wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:b.key,location:e,extensions:"all",s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){var c,e;b.data.status&&"1"==b.data.status?(e=b.data.regeocode,e.addressComponent?c=e.addressComponent.adcode:e.aois&&e.aois.length>0&&(c=e.aois[0].adcode),d(c)):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}var b=this,c=b.requestConfig;a.city?d(a.city):b.getWxLocation(a,function(a){e(a)})},AMapWX.prototype.getPoiAround=function(a){function d(d){var e={key:b.key,location:d,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.querytypes&&(e["types"]=a.querytypes),a.querykeywords&&(e["keywords"]=a.querykeywords),wx.request({url:"https://restapi.amap.com/v3/place/around",data:e,method:"GET",header:{"content-type":"application/json"},success:function(b){var c,d,e,f;if(b.data.status&&"1"==b.data.status){if(b=b.data,b&&b.pois){for(c=[],d=0;d<b.pois.length;d++)e=0==d?a.iconPathSelected:a.iconPath,c.push({latitude:parseFloat(b.pois[d].location.split(",")[1]),longitude:parseFloat(b.pois[d].location.split(",")[0]),iconPath:e,width:22,height:32,id:d,name:b.pois[d].name,address:b.pois[d].address});f={markers:c,poisData:b.pois},a.success(f)}}else a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}var b=this,c=b.requestConfig;a.location?d(a.location):b.getWxLocation(a,function(a){d(a)})},AMapWX.prototype.getStaticmap=function(a){function f(b){c.push("location="+b),a.zoom&&c.push("zoom="+a.zoom),a.size&&c.push("size="+a.size),a.scale&&c.push("scale="+a.scale),a.markers&&c.push("markers="+a.markers),a.labels&&c.push("labels="+a.labels),a.paths&&c.push("paths="+a.paths),a.traffic&&c.push("traffic="+a.traffic);var e=d+c.join("&");a.success({url:e})}var e,b=this,c=[],d="https://restapi.amap.com/v3/staticmap?";c.push("key="+b.key),e=b.requestConfig,c.push("s="+e.s),c.push("platform="+e.platform),c.push("appname="+e.appname),c.push("sdkversion="+e.sdkversion),c.push("logversion="+e.logversion),a.location?f(a.location):b.getWxLocation(a,function(a){f(a)})},AMapWX.prototype.getInputtips=function(a){var b=this,c=b.requestConfig,d={key:b.key,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.location&&(d["location"]=a.location),a.keywords&&(d["keywords"]=a.keywords),a.type&&(d["type"]=a.type),a.city&&(d["city"]=a.city),a.citylimit&&(d["citylimit"]=a.citylimit),wx.request({url:"https://restapi.amap.com/v3/assistant/inputtips",data:d,method:"GET",header:{"content-type":"application/json"},success:function(b){b&&b.data&&b.data.tips&&a.success({tips:b.data.tips})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})},AMapWX.prototype.getDrivingRoute=function(a){var b=this,c=b.requestConfig,d={key:b.key,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.origin&&(d["origin"]=a.origin),a.destination&&(d["destination"]=a.destination),a.strategy&&(d["strategy"]=a.strategy),a.waypoints&&(d["waypoints"]=a.waypoints),a.avoidpolygons&&(d["avoidpolygons"]=a.avoidpolygons),a.avoidroad&&(d["avoidroad"]=a.avoidroad),wx.request({url:"https://restapi.amap.com/v3/direction/driving",data:d,method:"GET",header:{"content-type":"application/json"},success:function(b){b&&b.data&&b.data.route&&a.success({paths:b.data.route.paths,taxi_cost:b.data.route.taxi_cost||""})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})},AMapWX.prototype.getWalkingRoute=function(a){var b=this,c=b.requestConfig,d={key:b.key,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.origin&&(d["origin"]=a.origin),a.destination&&(d["destination"]=a.destination),wx.request({url:"https://restapi.amap.com/v3/direction/walking",data:d,method:"GET",header:{"content-type":"application/json"},success:function(b){b&&b.data&&b.data.route&&a.success({paths:b.data.route.paths})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})},AMapWX.prototype.getTransitRoute=function(a){var b=this,c=b.requestConfig,d={key:b.key,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.origin&&(d["origin"]=a.origin),a.destination&&(d["destination"]=a.destination),a.strategy&&(d["strategy"]=a.strategy),a.city&&(d["city"]=a.city),a.cityd&&(d["cityd"]=a.cityd),wx.request({url:"https://restapi.amap.com/v3/direction/transit/integrated",data:d,method:"GET",header:{"content-type":"application/json"},success:function(b){if(b&&b.data&&b.data.route){var c=b.data.route;a.success({distance:c.distance||"",taxi_cost:c.taxi_cost||"",transits:c.transits})}},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})},AMapWX.prototype.getRidingRoute=function(a){var b=this,c=b.requestConfig,d={key:b.key,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.origin&&(d["origin"]=a.origin),a.destination&&(d["destination"]=a.destination),wx.request({url:"https://restapi.amap.com/v4/direction/bicycling",data:d,method:"GET",header:{"content-type":"application/json"},success:function(b){b&&b.data&&b.data.data&&a.success({paths:b.data.data.paths})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})},module.exports.AMapWX=AMapWX;
\ No newline at end of file
... ...
var config = {
key: '856d7698b954d8c2356bce3a3be86f1d'
}
module.exports.Config = config;
\ No newline at end of file
... ...
const app= getApp();
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
Page({
/**
* 页面的初始数据
*/
data: {
showright: true,
showbtn: true,
showitem:false,
chooseitem: [],
cityList: [],
currentindex: 0 ,//当前ID
//地图部分的数据
markers: [],
latitude: '',//当前维度
longitude: '',//当前经度
textData: {},//
city: '',
tips: '',//input输入选项
},
chooseone(e) {
console.log(e)
let that = this;
let index = e.currentTarget.dataset.index;
let cityList = that.data.cityList;
let showright = that.data.showright;
if (cityList[index].name=='自定义'){
showright=false;
}else{
showright = true;
}
for (let i in cityList){
if (i == index){
cityList[i].parentcheck = true;
}else{
cityList[i].parentcheck = false;
}
}
that.setData({
cityList: cityList,
showright: showright,
currentindex:index
})
},
choosetwo(e){
let that=this;
let cityList = that.data.cityList;
let index = e.currentTarget.dataset.index;
let currentindex = that.data.currentindex;
cityList[currentindex].children[index].check = !cityList[currentindex].children[index].check;
for (let obj of cityList){
let num = obj.num;
if (obj.parentcheck){
num=0
for (let item of obj.children){
if (item.check){
num++;
}
}
}
obj.num=num;
}
that.setData({
cityList: cityList
})
},
//输入关键词
setkeyword(e){
let that=this;
var keywords = e.detail.value;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
myAmapFun.getInputtips({
keywords: keywords,
location: that.data.lonlat,
city: that.data.city,
success: function (data) {
console.log(data)
if (data && data.tips) {
let newtips=[];
for (let obj of data.tips){
if (obj.location != undefined && obj.location !=''){//把没有坐标的地址删掉
newtips.push(obj)
}
}
that.setData({
tips: newtips,
keywords: keywords
});
}
}
})
},
//设置关键词
choosekeyword(e){
let that=this;
that.setData({
keywords: e.currentTarget.dataset.keywords
})
console.log(e.currentTarget.dataset.location);
that.mapkey(e.currentTarget.dataset.location);
},
//刚刚开始那到地图
getMap(){
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key});
myAmapFun.getRegeo({
iconPathSelected: '../../images/yy.png',
iconPath: "../../images/dingwei_no.png",
iconWidth: 20,
iconHeight: 20,
success: function (data) {
console.log(data)
var marker = [{
id: data[0].id,
latitude: data[0].latitude,
longitude: data[0].longitude,
iconPath: data[0].iconPath,
width: data[0].width,
height: data[0].height
}]
that.setData({
markers: marker
});
that.setData({
latitude: data[0].latitude
});
that.setData({
longitude: data[0].longitude,
city: data[0].regeocodeData.addressComponent.province
});
that.setData({
textData: {
name: data[0].name,
desc: data[0].desc
}
})
},
fail: function (info) {
// wx.showModal({title:info.errMsg})
}
})
},
//根据关键词和地址坐标找到地图
mapkey( location){
var that = this;
that.setData({
tips:''
})
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
var params = {
iconPathSelected: '../../images/yy.png',
iconPath: '../../images/dingwei_no.png',
success: function (data) {
let markersData = data.markers;
var poisData = data.poisData;
var markers_new = [];
markersData.forEach(function (item, index) {
markers_new.push({
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: item.iconPath,
width: item.width,
height: item.height
})
})
if (poisData.length > 0) {
let chooseitem = that.data.chooseitem;
chooseitem.push(poisData[0]);
that.setData({
markers: markers_new,
city: poisData[0].cityname || '',
latitude: markersData[0].latitude,//维度,
longitude: markersData[0].longitude , //经度,
chooseitem: chooseitem
});
} else {
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
latitude: res.latitude
});
that.setData({
longitude: res.longitude
});
that.setData({
city: '苏州市'
});
},
fail: function () {
that.setData({
latitude: 31.32416
});
that.setData({
longitude: 120.629029
});
that.setData({
city: '苏州市'
});
}
})
}
},
fail: function (info) {
}
}
params.location = location;
myAmapFun.getPoiAround(params)
},
delchooseitem(e){
let that=this;
let chooseitem = that.data.chooseitem;
chooseitem.splice(parseInt(e.currentTarget.dataset.index),1);
that.setData({
chooseitem: chooseitem
})
},
//获取景点信息
getdata(){
let that=this;
let url ='home/home/index';
app.post(url,{}).then((res)=>{
let cityList = [];
let currentlist=[];
let j=0;
for(let i in res){
for (let j in res[i]){
res[i][j].check=false;
}
let tem = {
id:j,
num:0,
name:i,
parentcheck:false,
children: res[i]
};
if (j == 0) {
currentlist = res[i];
tem.parentcheck=true;
}
j++;
cityList.push(tem)
}
let t={
id:j+1,
num: 0,
name: '自定义',
parentcheck: false,
children: []
}
cityList.push(t);
console.log(cityList)
that.setData({
cityList: cityList,
currentlist: currentlist
})
}).catch((errMsg)=>{
console.log(errMsg)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that=this;
that.getdata();
that.getMap();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "踏趣苏州",
"navigationBarBackgroundColor": "#fff"
}
\ No newline at end of file
... ...
<!--pages/chooseadress/chooseadress.wxml-->
<view class='bg'>
<image src='../../images/bg@2x.png'></image>
<image src='{{src}}'></image>
<view class='top_text'>必选地点</view>
<view class='main'>
<view class='main_left'>
<view class="left_cell {{item.parentcheck?'activity_cell':''}}" wx:for='{{cityList}}' wx:key bindtap='chooseone' data-index='{{index}}'>
<view class='unit_num' wx:if='{{item.num != 0}}'>{{item.num}}</view>
<text>{{item.name}}</text>
</view>
</view>
<view class='main_rigth' wx:if='{{showright}}'>
<view class="rigth_cell {{item.check?'activity_cell':''}}" wx:for='{{cityList[currentindex].children}}' data-index='{{index}}' wx:key bindtap='choosetwo'>{{item.scenic_name}}</view>
</view>
<view class='main_rigth' wx:else>
<view class='seach_box'>
<view class='seach_text'>
<input placeholder='请输入地点' bindinput='setkeyword'
value='{{keywords}}' placeholder-class='pclass'></input>
</view>
<view class='seach_items' wx:if='{{tips.length !=0 }}'>
<view class='seach_item' wx:for='{{tips}}' wx:key data-keywords='{{item.name}} ' data-location='{{item.location}}' bindtap='choosekeyword'>
<view>{{item.name}}</view>
<view class='icon_img'>
<image src='../../images/arror@2x.png'></image>
</view>
</view>
</view>
</view>
<view class='map_box'>
<view class='map_container'>
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}"></map>
</view>
</view>
<view class='tab_box' wx:if='{{chooseitem.length!=0}}'>
<view class='tab_cell' wx:for='{{chooseitem}}' wx:key>
<view class='close_box' catchtap='delchooseitem' data-index='{{index}}'>
<image src='../../images/close2.png'></image>
</view>
<text>{{item.name}}</text>
</view>
</view>
</view>
</view>
<view class='bottom_btn' wx:if='{{showbtn}}' bindtap='gorecord'>生成我的音乐LOGO</view>
</view>
... ...
/* pages/chooseadress/chooseadress.wxss */
page{
width: 100%;
height: 100%;
overflow: hidden
}
.map_container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bg{
width:100%;
height: 100%;
}
.bg image{
width:100%;
height: 100%;
}
.top_text{
position: absolute;
color:#222;
font-size:40rpx;
top:4%;
left:50%;
transform: translateX(-50%);
font-weight: bold;
}
.main{
position: absolute;
top:18%;
height: 80%;
width:100%;
padding:0 0 0 30rpx;
color:#D85372;
font-size:30rpx;
display: flex;
}
.main_left{
height: 80%;
overflow-y: auto;
overflow-x: hidden;
margin:0 20rpx 0 0;
}
.left_cell{
position: relative;
padding:0 10rpx;
width:125rpx;
height: 88rpx;
overflow-x: auto;
text-align:left;
display: flex;
align-items: center;
white-space: nowrap;
border:1rpx solid #D85372;
border-radius: 10rpx;
margin:0 0 24rpx 0;
}
.unit_num{
position: absolute;
width:32rpx;
height: 32rpx;
border-radius: 50%;
top:8rpx;
right:5rpx;
background-color: #FFC426;
font-size:26rpx;
color:#222222;
display: flex;
justify-content: center;
align-items: center;
z-index:5;
}
.main_rigth{
width:560rpx;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.rigth_cell{
display: inline-block;
padding: 0 34rpx;
margin:0 20rpx 24rpx 0;
height: 88rpx;
line-height: 88rpx;
text-align: center;
border-radius: 10rpx;
border:1rpx solid #D85372;
}
.seach_box{
width:530rpx;
box-sizing: border-box;
position:relative;
}
.seach_items{
background-color: #fff;
position: absolute;
top:88rpx;
width:530rpx;
border-radius: 10rpx;
padding:40rpx 30rpx;
box-sizing: border-box;
z-index:100;
height: 500rpx;
overflow-y: auto;
}
.seach_item{
padding:30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
color:#D85372;
font-size:30rpx;
border-bottom: 1rpx #ccc dashed;
}
.seach_item:last-child{
border:none;
}
.icon_img{
width:13rpx;
height:22rpx;
}
.icon_img image{
display: block;
width:100%;
height: 100%;
}
.seach_text{
height: 88rpx;
width:100%;
box-sizing: border-box;
overflow: hidden;
border-radius: 10rpx;
border:1rpx solid #D85372;
margin:0 30rpx 0 0;
}
.seach_text input{
box-sizing: border-box;
padding:0 30rpx;
width:100%;
height: 100%;
color:#D85372;
font-size:30rpx;
}
.pclass{
color:#D85372;
}
.map_box{
position: relative;
margin:24rpx 0 0 0;
width:530rpx;
height: 528rpx;
overflow: hidden;
}
.tab_box{
width:100%;
box-sizing: border-box;
margin:60rpx 0 0 0;
display: flex;
flex-wrap: wrap;
}
.tab_cell{
position: relative;
display: flex;
justify-content: center;
align-items: center;
color:#fff;
font-weight: bold;
background-color: #DB214C;
border-radius: 10rpx;
height: 88rpx;
padding:0 30rpx;
margin: 0 30rpx 20rpx 0;
}
.close_box{
position:absolute;
top:-15rpx;
right:-9rpx;
width:32rpx;
height:32rpx;
border-radius:50%;
overflow:hidden;
background-color: #fff;
}
.close_box image{
width:100%;
height: 100%;
}
.bottom_btn{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: #007CC2;
bottom:0;
height: 88rpx;
width:100%;
color:#fff;
font-size:32rpx;
}
.activity_cell{
background-color:#DB214C;
color:#fff;
font-weight: bold;
}
.map_container map{
width:100%;
height: 100%;
}
\ No newline at end of file
... ...
... ... @@ -4,6 +4,18 @@ const app = getApp()
Page({
data: {
list:[{
id:0,
}]
},
gochoose(){
wx.navigateTo({
url: '../chooseadress/chooseadress',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
onLoad: function () {
... ...
<view class='bg'>
<image src='../../images/bg@2x.png'></image>
<view class='top_text'>
<view class='mini_title'>去过的地方,就是连接起来的一段脚步音符</view>
<view class='title'>来制作你的音乐logo吧</view>
</view>
<view class='center_img'>
<image src='../../images/suzhou@2x.png'></image>
</view>
<view class='index_btn' bindtap='gochoose'>下一步</view>
</view>
\ No newline at end of file
... ...
.bg{
width:100%;
height: 100%;
position: fixed;
top:0;
bottom:0;
left:0;
}
.bg image{
width:100%;
height: 100%;
}
.top_text{
width:100%;
top:8%;
position: absolute;
color:#DB214C;
font-weight: bold;
text-align: center;
}
.mini_title{
font-size:25rpx;
margin:0 0 20rpx 0;
}
.title{
font-size:47rpx;
word-spacing: 10rpx;
}
.center_img{
position: absolute;
width:656rpx;
height: 572rpx;
z-index:2;
top:24%;
left:50%;
transform: translateX(-50%);
overflow: hidden;
}
.center_img image{
width:100%;
}
.index_btn{
position: absolute;
z-index:3;
color:#fff;
font-size:32rpx;
width:320rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
bottom:8%;
left:50%;
transform: translateX(-50%);
background-color: #007CC2;
border-radius: 40rpx;
}
.index_btn:active{
opacity: 0.7;
}
\ No newline at end of file
... ...
// pages/poster.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{"navigationBarTitleText": "踏趣苏州"}
\ No newline at end of file
... ...
<!--pages/poster.wxml-->
<view class='bg'>
<image src='../../images/abg.png'></image>
<view class='item_box'>
<view class='item'>
<text>巴塞罗那因为高迪的建筑,拥有了自然万物的灵魂。
而我们又该如何表达苏州?巴塞罗那因为高迪的建筑,拥有了自然万物的灵魂。
而我们又该如何表达苏州?</text>
<text>巴塞罗那因为高迪的建筑,拥有了自然万物的灵魂。
而我们又该如何表达苏州?巴塞罗那因为高迪的建筑,拥有了自然万物的灵魂。
而我们又该如何表达苏州?</text>
</view>
<view class='item'>
<view class='item_title'>作品要求</view>
<view class='item_cell'>
<text class='item_left'>内容</text>
<view class='item_rigth'>你在任何的城市行旅创意作品</view>
</view>
<view class='item_cell'>
<text class='item_left'>形式</text>
<view class='item_rigth'>音频节目、原创歌曲、短视频均可。</view>
</view>
<view class='item_cell'>
<text class='item_left'>时长</text>
<view class='item_rigth'>5分钟以内。</view>
</view>
</view>
<view class='item_btn'>开始提交</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/poster.wxss */
@import "../index/index.wxss";
.item_box{
position: absolute;
top:5%;
left:50%;
transform: translateX(-50%);
width:654rpx;
}
.item{
margin:26rpx 0 0 0;
color:#542C70;
font-size:32rpx;
width:654rpx;
height: 470rpx;
overflow-y: auto;
border-radius: 15rpx;
box-sizing: border-box;
padding:60rpx 40rpx;
background-color: rgba(255,255,255,1);
}
.item_title{
color:#333;
font-size: 32rpx;
font-weight: bold;
}
.item_cell{
margin:30rpx 0;
position: relative;
color:#333;
font-size:30rpx;
padding:0 0 0 84rpx;
}
.item_left{
position: absolute;
left:0;
top:0;
display: inline-block;
margin: 0 20rpx 0 0;
padding:5rpx 8rpx;
border-radius: 5rpx;
color:#fff;
font-weight: bold;
font-size: 28rpx;
background-color: #B63556;
}
.item_rigth{
width:420rpx;
display: inline-block;
}
.item_btn{
position: absolute;
width:520rpx;
height: 88rpx;
border-radius: 44rpx;
left: 50%;
bottom:-44rpx;
transform: translateX(-50%);
color:#fff;
font-weight: bold;
font-size:34rpx;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right,#952567,#D93948)
}
.item_btn:active{
opacity: 0.7
}
\ No newline at end of file
... ...
// pages/record/record.js
Page({
/**
* 页面的初始数据
*/
data: {
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
goshare_code(){
wx.navigateTo({
url: '../share_code/share_code',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
goposter(){
wx.navigateTo({
url: '../poster/poster',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "踏趣苏州"
}
\ No newline at end of file
... ...
<!--pages/record/record.wxml-->
<view class='bg'>
<image src='../../images/bg@2x.png'></image>
<view class='top_text'>
<view class='mini_title'>去过的地方,就是连接起来的一段脚步音符</view>
<view class='title'>来制作你的音乐logo吧</view>
</view>
<view class='center_img'>
<image src='../../images/suzhou@2x.png'></image>
</view>
<view class='bottom_box'>
<view class='play_box'>
<view class='play_left'>
<image src='../../images/zanting@2x.png'></image>
</view>
<view class='play_rigth'>
<view class='play_text'>来听听你的专属脚步音乐logo</view>
<audio poster="{{poster}}" src="{{src}}" id="myAudio"></audio>
</view>
</view>
<view class='btn_box'>
<view class='btn' bindtap='goshare_code'>转发到好友或群聊</view>
<view class='btn end_btn' bindtap='goposter'>保存图片后发至朋友圈让更多好友听到</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/record/record.wxss */
@import "../index/index.wxss";
.center_img {
width:464rpx;
height:400rpx;
}
.bottom_box{
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:5%;
width:560rpx;
overflow: hidden;
}
.play_box{
width:560rpx;
height: 132rpx;
border-radius: 10rpx;
background-color: #fff;
padding:0 20rpx;
box-sizing: border-box;
display: flex;
overflow: hidden;
align-items: center;
}
.play_left{
width:88rpx;
height: 88rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.play_rigth{
width:420rpx;
margin:0 0 0 12rpx;
}
.play_left image{
width:100%;
height: 100%;
}
.play_text{
text-align: center;
color:#333030;
font-size:24rpx;
}
.play_rigth audio{
height: 34rpx;
}
.btn_box{
margin:16rpx 0 0 0;
width:560rpx;
background-color: #fff;
padding:30rpx 20rpx;
border-radius: 10rpx;
box-sizing: border-box;
}
.btn{
width:520rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
color:#fff;
border-radius: 40rpx;
background-color: #007CC2;
font-size:32rpx;
}
.end_btn{
margin:36rpx 0 0 0;
font-size:28rpx;
}
\ No newline at end of file
... ...
// pages/share_code.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "踏趣苏州"
}
\ No newline at end of file
... ...
<!--pages/share_code.wxml-->
<view class='bg'>
<image src='../../images/bg@2x.png'></image>
<view class='top_text'>
<view class='mini_title'>去过的地方,就是连接起来的一段脚步音符</view>
<view class='title'>来制作你的音乐logo吧</view>
</view>
<view class='center_img'>
<image src='../../images/suzhou@2x.png'></image>
</view>
<view class='code_box'></view>
</view>
... ...
/* pages/share_code.wxss */
@import "../index/index.wxss";
.code_box{
position:absolute;
right:7%;
bottom:26%;
z-index:4;
background-color:#000;
width:137rpx;
height:137rpx;
overflow:hidden;
}
.code_box image{
width:100%;
height: 100%;
}
\ No newline at end of file
... ...
// pages/start/start.js
const app =getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
start(e){
console.log(e)
wx.login({
success: (res) => {
let url = 'wxapp/public/getSessionKey';
let params = {
code: res.code
}
app.post(url, params).then((res) => {
console.log(res)
}).catch((errMsg) => {
console.log(errMsg)
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/start/start.wxml-->
<view class='bg'>
<image src='../../images/bgg@2x.png'></image>
<button class='start_btn' open-type='getUserInfo' bindgetuserinfo='start'>来制作属于自己的音乐LOGO</button>
</view>
... ...
/* pages/start/start.wxss */
@import '../index/index.wxss';
.start_btn {
position: absolute;
z-index:3;
color:#fff;
font-size:32rpx;
width:520rpx;
height:80rpx;
line-height:80rpx;
text-align:center;
bottom:10%;
left:50%;
transform:translateX(-50%);
background-color:#007CC2;
border-radius:40rpx;
}
.start_btn:active{
opacity: 0.7;
}
\ No newline at end of file
... ...
... ... @@ -4,7 +4,7 @@
"ignore": []
},
"setting": {
"urlCheck": true,
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true,
... ... @@ -13,7 +13,7 @@
"compileType": "miniprogram",
"libVersion": "2.2.5",
"appid": "wx4ac44ac1779dc6a6",
"projectname": "%E8%B8%8F%E5%AF%BB%E8%8B%8F%E5%B7%9E",
"projectname": "LLF_%E8%B8%8F%E5%AF%BB%E8%8B%8F%E5%B7%9E",
"isGameTourist": false,
"condition": {
"search": {
... ...