2018寒假web许永青答辩
作者：互联网
2018寒假web许永青答辩
滑稽线下交易平台
这是我第一次参加答辩，由于寒假过年，感觉自己写的作品很简单，很多功能都没有实现，这是我写的一个滑稽线下交易平台，主要是掌握一些关于微信小程序的一些基础知识，本来是想写一个云端小卖部的，但能力有限无法实现。
1. 主要思想
这个就是一个简单的近距离闲杂物品的线下交易平台，可以出售和购买闲置物品，通过这次答辩我还是简单的微信小程序入门，学会了 一些简单的API调用。
2. 主要技术
主要是通过wxml和wxss和js来实现，但是由于技术不足，加上后台没有连接感觉这个答辩没有什么实质性上的用处，感觉真的和其他做微信小程序的学长学姐比起来真的差的有点远。
3. 主要功能介绍
- 登陆界面 ，一个简单的渐变动画，主要通过js和wxml来实现
- 发布首页通过调用微信小程序官方发布的map接口来作为背景，主要是对用户的当前定位.
位置填写解决懒癌群众不想打字的心理
- 发布信息的详情页面 主要用于用户填写基本信息
- 搜索界面 主要是通过js来进行实现，这个搜索是照着别人的组件写的，以后i可以提取出来修改修改样式就剋以继续使用了，个人觉得这个大概是我这次答辩一个比较大的收获了
- 其他界面就是一些简单的物品展示界面，以及信息发布成功的显示界面
登陆界面
登陆首页动画的实现
[(旋转放大)页面，代码片.
data: {
animationData: {}
},
onShow() {
const animation = wx.createAnimation({
duration:3000,
timingFunction:'ease-in-out',
delay:0,
transformOrigin:'0 50% 50%'
})
this.animation = animation
this.animation.rotate(360).scale(2, 2).step()
this.animation.translate(80, 60).step({ duration: 1000 })
this.setData({
animationData:animation.export()
})
},
##关于发布首页API的调用和地址详情页ApI的调用
//发布首页
<view class="map-container">
<map id='map' class='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location controls="{{controls}}" bindcontroltap="controltap"
></map>
</view>
Page({
data: {
longitude:"",
latitude:"",
controls: [{
iconPath: '/resource/a.png',
position: {
left: (app.globalData.windowWidth / 2)-5,
top: (app.globalData.windowHeight / 2)-30,
width: 15,
height: 15
},
clickable: true
},
{
id: 1,
iconPath: '/resource/b.png',
position: {
left: 30,
top: app.globalData.windowHeight-70,
width: 30,
height: 30
},
clickable: true
}]
},
controltap(){
this.mapCtx.moveToLocation()
},
onReady(){
this.mapCtx = wx.createMapContext('map')
},
onShow(){
this.getLocation();
},
getLocation(){
wx.getLocation({
type: 'gcj02',
success:this.handleGetLocationSucc.bind(this)
})
},
handleGetLocationSucc(res){
this.setData({
longitude:res.longitude,
latitude:res.latitude
})
},
})
地址自动搜索补全
<view class='row'>
<label class='lab'>我的地址</label>
<view class='info' bindtap='handleAddressClick'>{{address}}</view>
</view>
Page({
data: {
address: "点击选择，要勾选哟~",
},
staticData: {},
handleAddressClick() {
wx.chooseLocation({
success: this.handleChooseLocationsucc.bind(this)
})
},
handleChooseLocationsucc(res) {
this.setData({
address: res.address
});
},
onShareAppMessage(res) {
return {
title: '滑稽交易平台',
path: '/pages/index/index'
}
},
shuoMing(e) {
this.setData({
message: e.detail.value,
})
},
contact(e) {
this.setData({
contact: e.detail.value,
})
},
关于用户信息的简单判断
//注意老式定义变量的方式已经不行，参看微信公众号平台bindinput.
handleSubmit() {
if (this.data.address === "点击选择，要勾选哟~") {
wx.showToast({
title: '请填写地址',
icon: 'loading',
duration: 1000
})
return;
}
if (!this.data.message) {
wx.showToast({
title: '请填写说明',
icon: 'loading',
duration: 1000
})
return;
}
if (!this.data.contact) {
wx.showToast({
title: '请填写联系方式',
icon: 'loading',
duration: 1000
})
return;
}
if (this.data.contact&&this.data.message) {
wx.navigateTo({
url: '/pages/detall/detall'
//加载绝对路径时url前加 /，不然页面无法跳转。
})
}
}
关于搜索页
Page({
data: {},
// 搜索栏
onl oad: function () {
var that = this;
WxSearch.init(
that, // 本页面一个引用
['红滑稽', '橙滑稽', "黄滑稽", "绿滑稽", '青滑稽', '蓝滑稽'], // 热点搜索推荐，[]表示不使用
['紫滑稽', '黑滑稽', '白滑稽', "灰滑稽", '张滑稽', '李滑稽', '王滑稽', "赵滑稽", '红滑稽', '橙滑稽', "黄滑稽", "绿滑稽", '青滑稽', '蓝滑稽'],// 搜索匹配，[]表示不使用
that.mySearchFunction, // 提供一个搜索回调函数
that.myGobackFunction //提供一个返回回调函数
);
},
// 转发函数,固定部分
wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
wxSearchClear: WxSearch.wxSearchClear, // 清空函数
// 搜索回调函数
mySearchFunction: function (value) {
// do your job here
// 跳转
wx.redirectTo({
url: '../zhanshi/zhanshi?searchValue=' + value
})
},
// 返回回调函数
myGobackFunction: function () {
// do your job here
// 跳转
wx.redirectTo({
url: '../index/index?searchValue=返回'
})
}
})
删除缓存，历史纪录，关键字提示
// 提示集合
var __tipKeys = [];
// 搜索回调函数
var __searchFunction = null;
// 返回函数
var __goBackFunction = null;
// 应用变量
var __that = null;
// 初始化函数
function init(that, hotKeys, tipKeys, searchFunction, goBackFunction) {
__that = that;
__tipKeys = tipKeys;
__searchFunction = searchFunction;
__goBackFunction = goBackFunction;
var temData = {};
var barHeight = 43;
var view = {
barHeight: barHeight
}
temData.hotKeys = hotKeys;
wx.getSystemInfo({
success: function (res) {
var wHeight = res.windowHeight;
view.seachHeight = wHeight - barHeight;
temData.view = view;
__that.setData({
wxSearchData: temData
});
}
});
getHisKeys(__that);
}
// 搜索框输入时候操作
function wxSearchInput(e) {
var inputValue = e.detail.value;
// 页面数据
var temData = __that.data.wxSearchData;
// 寻找提示值
var tipKeys = [];
if (inputValue && inputValue.length > 0) {
for (var i = 0; i < __tipKeys.length; i++) {
var mindKey = __tipKeys[i];
// 包含字符串
if (mindKey.indexOf(inputValue) != -1) {
tipKeys.push(mindKey);
}
}
}
// 更新数据
temData.value = inputValue;
temData.tipKeys = tipKeys;
// 更新视图
__that.setData({
wxSearchData: temData
});
}
// 清空输入
function wxSearchClear() {
// 页面数据
var temData = __that.data.wxSearchData;
// 更新数据
temData.value = "";
temData.tipKeys = [];
// 更新视图
__that.setData({
wxSearchData: temData
});
}
// 点击提示或者关键字、历史记录时的操作
function wxSearchKeyTap(e) {
search(e.target.dataset.key);
}
// 确任或者回车
function wxSearchConfirm(e) {
var key = e.target.dataset.key;
if(key=='back'){
__goBackFunction();
}else{
search(__that.data.wxSearchData.value);
}
}
function search(inputValue) {
if (inputValue && inputValue.length > 0) {
// 添加历史记录
wxSearchAddHisKey(inputValue);
// 更新
var temData = __that.data.wxSearchData;
temData.value = inputValue;
__that.setData({
wxSearchData: temData
});
// 回调搜索
__searchFunction(inputValue);
}
}
// 读取缓存
function getHisKeys() {
var value = [];
try {
value = wx.getStorageSync('wxSearchHisKeys')
if (value) {
// Do something with return value
var temData = __that.data.wxSearchData;
temData.his = value;
__that.setData({
wxSearchData: temData
});
}
} catch (e) {
// Do something when catch error
}
}
// 添加缓存
function wxSearchAddHisKey(inputValue) {
if (!inputValue || inputValue.length == 0) {
return;
}
var value = wx.getStorageSync('wxSearchHisKeys');
if (value) {
if (value.indexOf(inputValue) < 0) {
value.unshift(inputValue);
}
wx.setStorage({
key: "wxSearchHisKeys",
data: value,
success: function () {
getHisKeys(__that);
}
})
} else {
value = [];
value.push(inputValue);
wx.setStorage({
key: "wxSearchHisKeys",
data: value,
success: function () {
getHisKeys(__that);
}
})
}
}
// 删除缓存
function wxSearchDeleteAll() {
wx.removeStorage({
key: 'wxSearchHisKeys',
success: function (res) {
var value = [];
var temData = __that.data.wxSearchData;
temData.his = value;
__that.setData({
wxSearchData: temData
});
}
})
}
// 导出接口
module.exports = {
init: init, //初始化函数
wxSearchInput: wxSearchInput,// 输入变化时的操作
wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
wxSearchConfirm: wxSearchConfirm, // 搜索函数
wxSearchClear: wxSearchClear, // 清空函数
}
因为不知道怎么上传效果动图，所以只有贴代码，但代码有点多，所以只贴了关于js的代码。
最后总结
这次寒假答辩因为自己的时间规划不充分，所以作品感觉不是很好，该有界面有些还没有完成。
这次答辩让我对微信小程序有了简单的入门，也帮助我在自己想写的项目上打下了一点点基础。
让我有了一点组件化的思想。
感觉可以多写一些小功能，把它们封装起来，以后又用的时候直接导入修改参数就可以了。
还是要好好复习前端提审一下自己的赏美。
真的这个配色，emmmmmmmmmmmmmmmmm.
希望自己能够好好学习后面的东西，早点写好那个云端小卖部。（这样可以让我妈妈少请两个工人。）
标签：__,web,许永青,滑稽,value,temData,2018,var,data 来源： https://blog.csdn.net/xuyongqing1/article/details/89294329