After the recent two years of development, the status of the applet is gradually getting higher and higher each platform one after another made its own small program platform, with the market demand increasingly accomplished, uni-app is a use Vue.js All front-end application development framework, developers write one set of code, you can publish to iOS, Android, H5, and a variety of small programs (micro-channel / Alipay / Baidu / headlines / QQ / nails) and other platforms. Even without cross-end, uni-app is also a little better development framework.
Renderings
1, to obtain location information
In positioning function, the procedures used Tencent maps api and api interfaces Tencent weather, the
need to go to the official website registered developer account to request the data we need by appKey registration obtained detailed registration steps at your own degree of your mother
due need to use positioning, uniapp of getLocation method is to obtain the coordinates of the current position, then the corresponding Tencent map specific city
uni.getLocation({
// #ifdef MP-WEIXIN
type: 'wgs84',
// #endif
async success (res) {
const {latitude, longitude} = res
const result = await that.ajax({url: 'https://apis.map.qq.com/ws/geocoder/v1', data: {
location: `${latitude},${longitude}`,
key: ''
}})
let {province, city, district} = result.result.address_component
that.getData(province, city, district)
},
fail(){
uni.showModal({
content: '检测到您没打开定位权限，是否去设置打开？',
confirmText: "确认",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
// #ifdef MP-WEIXIN
wx.openSetting({
success: (res) => {
that.getIn()
}
})
// #endif
// #ifdef MP-ALIPAY
my.openSetting({
success: (res) => {
that.getIn()
}
})
// #endif
}
}
});
}
})
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）2. Check the weather
After obtaining a city name, city name and then check the weather interface, get weather forecast for the next few days.
Tencent weather weather interface uses an interface api.
Before use in the applet, legitimate domain name in the request to add a small program settings interface, developed settings.
methods: {
async getData(province, city, district){
const that = this
const data = await that.ajax({url: 'https://wis.qq.com/weather/common', data: {
source: 'xw',
weather_type: 'observe|alarm|air|forecast_1h|forecast_24h|index|limit|tips|rise',
province: province,
city: city,
county: district
}})
that.region = [province, city, district]
if(data.status != 200){
uni.showToast({
title: result.message,
icon: 'none'
});
return false;
}
if(!data.data.air.aqi_name){
uni.showToast({
title: '暂无该地区的天气信息',
icon: 'none'
});
return false;
}
that.data = data.data
}
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）3, a small program interface
Since there is no aesthetic, lack of imagination, reference Tencent weather interface to do. Function is very simple, check the weather and the switching current weather in other parts of the region to view the last 24 hours the weather conditions and the recent 6-day weather conditions, today's Lunar New Year show time.
4, the use of plug-ins
I want to quickly build a small program, which uses the line graph uchart.js ,
because the program is compatible with Alipay small and micro letter applets, plug-ins calendar.js Lunar query is also used
questions in Alipay line chart applet will be blurred It needs to be done compatible processing
<template>
<!-- #ifdef MP-ALIPAY -->
<canvas canvas-id="canvas" id="canvas" width="750" height="240" style="width:750rpx;height:240rpx;" class="canvas">
</canvas>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<canvas canvas-id="canvas" id="canvas" class="canvas">
</canvas>
<!-- #endif -->
</template>
<script>
var wxCharts = require('../../utils/chart.js');
lineChart = new wxCharts({
$this: this,
canvasId: 'canvas',
type: 'line',
categories: ['', '', '', '', '' ,''],
colors: ['#ffad35', '#4fc3f7'],
background: '#fff',
animation: true,
series: [{
name: '',
data: that.max,
format: function (val, name) {
return val + '°';
}
}, {
name: '',
data: that.min,
format: function (val, name) {
return val + '°';
}
}],
xAxis: {
disableGrid: true,
disabled: true,
axisLine: false
},
yAxis: {
max: Math.max.apply(Math, that.max) * 1 + 0.1,
disabled: true,
disableGrid: true,
},
legend:{
show: false
},
// #ifdef MP-ALIPAY
pixelRatio: that.pixelRatio, // 解决支付宝模糊问题
// #endif
width: that.cWidth,
height: that.cHeight
});
</script>Micro letter applet city with select components, urban component does not directly use Alipay, uniapp official description: support the installation mpvue components, but npm mode does not support applets custom components (such as wxml format vant-weapp), to find a city plugin Alipay can be used: mpvue-citypicker ,
city select components
<template>
<view class="txt-location" @tap="showCityPicker">
<view class="icon"></view>
<block v-if="region.length">{{region[0]}}{{region[1]}}{{region[2]}}</block>
<block v-else>选择城市</block>
<!-- #ifdef MP-WEIXIN -->
<picker class="city" mode="region" @change="handleChange" :value="region">
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
<!-- #endif -->
</view>
<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
</template>
<script>
import mpvueCityPicker from 'mpvue-citypicker';
export default {
data() {
return {
region: [],
pickerValueDefault: [0, 0, 1]
};
},
components: {
mpvueCityPicker
},
methods: {
showCityPicker() {
// #ifdef MP-ALIPAY
this.$refs.mpvueCityPicker.show()
// #endif
},
onConfirm(e) {
if(e.label){
this.region = e.label.split('-')
this.getData(this.region[0], this.region[1], this.region[2])
}
},
handleChange(e) {
this.region = e.detail.value
this.getData(this.region[0], this.region[1], this.region[2])
}
}
};
</script>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）