写这篇博客来记录一下这两周接触到的一些新东西。
最近在写一个后台,其中一个功能就是显示当地城市的时间,天气情况。具体也可查看这片博客
获取天气接口地址:http://wthrcdn.etouch.cn/weather_mini?city=??
接下来就演示一下吧:
//获取当地城市及天气
async getTianQi(){
var result = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
console.log(result.data.data.forecast)
this.City = result.data.data.forecast[0]
console.log(this.City)
}
打印输出情况:
result.data.data.forecast
包含今天及之后几天的天气情况:
但我需要的是当天天气情况,所以result.data.data.forecast[0]
至此,制定城市天气情况获取完毕。
刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。具体也可查看这片博客
关于mpvue的具体操作以及详细api我们可以点开mpvue官网查看
第一步:找好存储位置创建一个空mpvue文件夹
例如我想在D:\myDemo创建,那么在对应位置打开我们俗称的黑色小窗口:
输入vue init mpvue/mpvue-quickstart my-project
,然后按回车就好。(my-project是文件名,你自定义)
然后就一路回车就好:
这时我们就创建一个基于 mpvue-quickstart 模板的新项目,之后就是安装依赖:
先cd my-project
进入该文件,然后输入npm install
下载依赖
安装完之前的所有东西后,最后想运行?输入npm run dev
呃?和想象的不一样?没有出现想vue一样的链接打开浏览器预览,其实小程序是不能在浏览器预览的,所以输入npm run dev
只是会打包生成dist文件夹
那我们要如何运行预览呢?这时就要借助微信开发者工具了,也是在官网下载即可
在开发者工具选择小程序打开刚创建的文件夹,打开模拟器就可以看到预览效果了。
通过刚才的利用mpvue
开发小程序,我们下载完空的mpvue
脚手架后,重新写src
文件下的文件,修改app.json
等配置文件得到一个原始空mpvue文件,以便之后的开发。
这是我们再打开小程序开发工具可能会发现程序报错:
当时我真是无语了,弄了好一会才弄好。接下来就贴一下我解决这个问题的办法吧,我只是修改了文件project.config.json
下的useCompilerModule
就可以了。
具体操作:
在目录找到project.config.json
文件后,将useCompilerModule
修改为true
最近在学微信小程序,呃,需要自己写后台获取数据,就采用基于koa技术搭建服务器,接下来就简单说一下如何快速初步搭建一个简单服务器吧。具体也可查看这篇博客。
一:在根目录下创建一个服务器文件夹
这里我起名字为my_server
二:my_server
文件夹需要下载koa
和koa-router
npm install koa koa-router
三:在my_server
文件夹下创建一个server.js
文件
let Koa = require('koa');
let KoaRouter = require('koa-router');
// 1. 生成应用及路由器实例
const app = new Koa();
const router = new KoaRouter();
// 核心代码
router.get('/', (ctx, next) => {
// 1. 获取请求的参数
// 2. 根据请求的地址和参数处理数据
// 3. 响应数据
ctx.body = '我是服务器';
});
// 2. 使用路由器及路由
app
.use(router.routes()) // 声明使用路由
.use(router.allowedMethods()) // 允许使用路由的方法
// 3. 监听端口
app.listen('3000', () => {
console.log('服务器启动成功');
console.log('服务器地址: http://localhost:3000');
})
四:启动服务器
在终端输入node server.js
效果图:
至此,一个基于koa的简单服务器就搭建好了,剩余的就按自己api文档去弄就好了。
最近还和深度学习方面搞个东西,需要前端对图片进行标注,呃,这个我上网也没找到什么好方法,只能自己通过js来实现,不过现在刚初步做出一点效果,样式没留意,挺丑的,嘻嘻。具体也可查看这篇博客。
功能:
标注前:
标注后:
打印记录坐标点:(这个坐标看你自己需求,是相对图片的百分比坐标,还是相对整个窗口的坐标,js都可以实现的)
代码实现:(我先说一说关键功能实现的js代码(里面涉及了date的数据,所以需要看下后面的全部代码实现),后面就是全部代码)
判断鼠标是否右击:
if(e.button !== 2) //判断鼠标是否右击
阻止冒泡行为和默认右键菜单事件
document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
if(e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault()
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false
}
return false
}) //阻止冒泡行为和默认右键菜单事件
给图片加点击事件:
document.getElementById('myBiaoZhu').onmousedown=(e)=>{
e = e || window.event
if(e.button !== 2){ //判断是否右击
if(this.canBiaoZhu){ //判断是否可以进行标注
var x = e.offsetX || e.layerX
var y = e.offsetY || e.layerY
console.log(x,y)
var myImg = document.querySelector("#myBiaoZhu")
var currWidth = myImg.clientWidth
var currHeight = myImg.clientHeight
var ProportionWidthInImg = x/currWidth
var ProportionHeightInImg = y/currHeight
// console.log("图片比例高度:"+ProportionHeightInImg)
// console.log("图片比例宽度:"+ProportionWidthInImg)
this.banMa.push({
id:this.banMa.length+1,
x,
y
})
this.createMarker(x,y)
}
}
}
画点:
createMarker(x, y) {
var div = document.createElement('div')
div.className = 'marker'
div.id = 'marker'+this.banMa.length
y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
div.style.width = this.pointSize + 'px'
div.style.height = this.pointSize + 'px'
div.style.backgroundColor = this.pointColor
div.style.left = x + 'px'
div.style.top = y + 'px'
div.oncontextmenu=((e)=>{ //阻止冒泡行为和默认右键菜单事件,同时删除该点
var id = e.target.id
document.getElementById('myBiaoZhuDiv').removeChild(div)
this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
if(e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault()
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false
}
return false
})
document.getElementById('myBiaoZhuDiv').appendChild(div)
},
html:
<template>
<div class="myBiaoZhu" id="myBiaoZhuDiv">
<img id="myBiaoZhu" src="./1.png" alt="" style="height: 400px;width: 400px;">
<el-button type="text" @click="startBiaoZhu">开始标注</el-button>
<el-button type="text" @click="endBiaoZhu">标注完成</el-button>
</div>
</template>
css:
<style lang="less">
#myBiaoZhuDiv{
position:relative;
img{
border:solid 1px #000;
display:inline-block;
margin:100px 100px;
z-index: 1;
}
.marker{
position:absolute;
border-radius: 50%;
z-index: 999;
}
}
</style>
js:
<script>
export default {
name: '',
components: {},
data () {
return {
banMa:[], //斑马线的数组
canBiaoZhu:false, //是否可以进行标注
pointColor:'red', //点的颜色
pointSize:10, //点的大小
}
},
methods: {
//开始标注
startBiaoZhu(){
this.canBiaoZhu = true
},
//完成标注
endBiaoZhu(){
this.canBiaoZhu = false
},
//画点
createMarker(x, y) {
var div = document.createElement('div')
div.className = 'marker'
div.id = 'marker'+this.banMa.length
y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
div.style.width = this.pointSize + 'px'
div.style.height = this.pointSize + 'px'
div.style.backgroundColor = this.pointColor
div.style.left = x + 'px'
div.style.top = y + 'px'
div.oncontextmenu=((e)=>{
var id = e.target.id
document.getElementById('myBiaoZhuDiv').removeChild(div)
this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
if(e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault()
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false
}
return false
}) //阻止冒泡行为和默认右键菜单事件,删除该点
document.getElementById('myBiaoZhuDiv').appendChild(div)
},
},
watch: {},
computed: {},
created () {
},
mounted () {
document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
if(e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault()
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false
}
return false
}) //阻止冒泡行为和默认右键菜单事件
document.getElementById('myBiaoZhu').onmousedown=(e)=>{
e = e || window.event
if(e.button !== 2){ //判断是否右击
if(this.canBiaoZhu){ //判断是否可以进行标注
var x = e.offsetX || e.layerX
var y = e.offsetY || e.layerY
console.log(x,y)
var myImg = document.querySelector("#myBiaoZhu")
var currWidth = myImg.clientWidth
var currHeight = myImg.clientHeight
var ProportionWidthInImg = x/currWidth
var ProportionHeightInImg = y/currHeight
// console.log("图片比例高度:"+ProportionHeightInImg)
// console.log("图片比例宽度:"+ProportionWidthInImg)
this.banMa.push({
id:this.banMa.length+1,
x,
y
})
this.createMarker(x,y)
}
}
}
},
beforeDestroy () {
},
destroyed () {
},
}
</script>