Why is two small procedures, rather than multiple platforms, because the registration headlines small procedures have no qualification to give up other platforms, why do this small procedures because recently just free, with uniAPP to practice.

After more than two years of development, the status of small program is gradually higher and higher, each platform to do their own small program platform, with the market demand more and more, we develop the platform of small program passion is also (by) (forced) high (no) rise (nai).

Why uniapp? Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding) and other platforms. Uni-app is also a better applets development framework, even without cross-ends. Official. Taro, WEpy, MPvue friends do not spray me, we each have their own preferences, we happy good.

Zhixing Weather Mini program (Alipay mini program, wechat mini program)

rendering

1. Get location information

In the positioning function, this program uses Tencent map API and Tencent weather API interface,

We need to register the developer account on the official website and request the data we need through the appKey obtained after registration. For detailed registration steps, please do your own baidu.com

Since the positioning function is needed, the getLocation method of UniApp obtains the coordinates of the current location, and then corresponds to the specific city on Tencent map

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: 'Detected that you did not turn on location permission, do you want to set it to turn on? ', confirmText: "confirm ", cancelText:" cancel ", 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 } } }); }})Copy the code

2. Check the weather

Get the city name, then use the city name to query the weather interface, get the weather forecast for the next few days. The weather interface uses Tencent Weather interface API. Before using the request domain name in the mini program, add the request domain name to the development Settings page on the mini program Settings page.

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: 'no weather information for this region ', icon: 'None'}); return false; } that.data = data.data } }Copy the code

3, small program interface

Because there is no aesthetic, lack of imagination, reference Tencent weather interface to do. Function is very simple, view the current region of the weather and switch to other regions of the weather, view the latest 24 hours of weather and the latest 6 days of weather, display today’s lunar time.

4. Use of plug-ins

In order to quickly complete the construction of small programs, uchart.js is adopted for the line chart inside, because it is compatible with Alipay mini program and wechat mini program, and the plug-in Calendar.js is also adopted for lunar calendar query. Line chart in alipay small program will have a fuzzy problem, need to do 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: thate. 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: }, // #endif width: that.cwidth, height: that.cHeight }); </script>Copy the code





<script> var time = require('.. /.. /utils/utils.js').calendar.solar2lunar(); Let day = '${time.cDay} month ${time.cDay} ${time.ncWeek} Lunar ${time.IMonthCn}${time.IDayCn}' // September 10 Tue August 12 </script>Copy the code

WeChat applet city selection components, pay treasure to the city without can be used directly components, uniapp official introduction: support mpvue components installed, but a small program that NPM mode does not support custom components (such as vant WXML format – weapp), find a alipay city can use the plug-in: mpvue-citypicker,

City selection component

<template> <view class="txt-location" @tap="showCityPicker"> <view class="icon"></view> <block V - if = "region. Length" > {{region [0]}} {{region [1]}} {{region [2]}} < / block > < - the else block v > select city < / block > <! -- #ifdef MP-WEIXIN --> <picker class="city" mode="region" @change="handleChange" :value="region"> <view class="picker"> The currently selected: {{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>Copy the code

conclusion

  1. The interface was quickly built, providing a relatively complete set of components and various API2
  2. Weather interface query Tencent weather, need to do filtering processing to use, some areas do not return to query the weather need friendship prompt processing
  3. For example, the chart is fuzzy, the city selection component needs to be made by itself, the message prompt box uni.showToast needs to be compatible when used, the duration field cannot be used in Alipay, and the location uni.getLocation needs to be compatible when used. Alipay cannot use type field and so on.
  4. The submission and review of the program was relatively quick. Mine was completed in about one day. But alipay audit is slow
  5. Next, place the code at github.com/galan99