Используйте uniapp для написания апплета погоды WeChat и апплета Alipay.

Апплет WeChat

Почему есть две мини-программы вместо нескольких платформ, потому что те, кто зарегистрировал мини-программы Toutiao, не имеют права отказываться от других платформ, почему эти мини-программы потому, что я недавно был свободен и использую uniapp для практики мои навыки.

После более чем двух лет разработки статус небольших программ постепенно становился все выше и выше.Каждая платформа одну за другой создавала свою собственную небольшую программную платформу.С растущим рыночным спросом мы увлечены разработкой небольших программ для каждой платформы. Также с (быть) (вынужденным) высоко (нет) вверх (Най).

Почему стоит выбрать юниап? uni-app — это фреймворк для разработки всех фронтенд-приложений с использованием Vue.js Разработчики пишут набор кодов, которые можно публиковать в iOS, Android, H5 и различных небольших программах (WeChat/Alipay/Baidu/Toutiao/QQ/ DingTalk)) и другие платформы. Даже если это не кросс-энд, uni-app также является лучшим фреймворком для разработки небольших программ. от официала. Друзья, которые любят таро, вепи и мпвуе, меня не ругают, у каждого свои плюсы, и все довольны.

Апплет Zhixing Weather (апплет Alipay, апплет WeChat)

визуализация

1. Получить информацию о местоположении

В функции позиционирования эта программа использует API карты Tencent и интерфейс API Tencent Weather.

Вам необходимо зарегистрировать аккаунт разработчика на официальном сайте, и запросить нужные нам данные через полученный после регистрации appKey Подробные шаги регистрации, пожалуйста, спланируйте самостоятельно.

В связи с необходимостью использования функции позиционирования метод getLocation uniapp получает координаты текущего местоположения, а затем соответствует конкретному городу на карте Tencent.

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
			}
		  }
		});
	}
})

2. Проверьте погоду

Получив название города, используйте название города, чтобы запросить интерфейс погоды, чтобы получить прогноз погоды на следующие несколько дней. Погодный интерфейс использует API интерфейса погоды Tencent. Прежде чем использовать его в апплете, вам необходимо добавить запрос легального доменного имени в интерфейсе настроек апплета и настройках разработки.

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
    }
}

3. Мини-программный интерфейс

Так как нет никакой эстетики и недостатка воображения, это сделано с привязкой к интерфейсу Tencent Weather. Функция очень проста, проверяйте погоду в текущем регионе и переключайте погоду в других регионах, проверяйте погоду за последние 24 часа и погоду за последние 6 дней и отображайте сегодняшнее лунное время.

4. Использование плагинов

Если вы хотите быстро завершить построение апплета, линейная диаграмма внутри используетuchart.js, Поскольку он совместим с апплетом Alipay и апплетом WeChat, запрос лунного календаря также является подключаемым модулем.calendar.js.

Линейный график будет иметь неоднозначные проблемы в апплете Alipay, и он должен быть совместим

<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>


Использование плагина Gregorian
<script>
var time = require('../../utils/utils.js').calendar.solar2lunar();
let day = `${time.cMonth}月${time.cDay} ${time.ncWeek} 农历${time.IMonthCn}${time.IDayCn}` // 9月10 星期二 阳历八月十二
</script>

В апплете WeChat есть компонент выбора города, а в Alipay нет компонента города, который можно использовать напрямую.Официальное введение uniapp: он поддерживает установку компонента mpvue, но метод npm не поддерживает пользовательский компонент апплет (например, vant-weapp в формате wxml). Найдите плагины City, которые может использовать Alipay:mpvue-citypicker,

компонент выбора города

<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>

Суммировать

  1. Интерфейс создается быстро, предоставляя относительно полные компоненты и различные API2.
  2. Погода Tencent, запрашиваемая интерфейсом погоды, должна быть отфильтрована, прежде чем ее можно будет использовать.В некоторых регионах запрос погоды не возвращает дружественное напоминание.
  3. В первый раз, когда я делал апплет Alipay, я столкнулся с множеством подводных камней, например, график размыт, компонент выбора города нужно сделать самому, окно подсказки сообщения uni.showToast должно быть совместимо при использовании, Alipay нельзя использовать поле продолжительности, а местоположение можно получить при использовании uni.getLocation Требуется совместимость, Alipay не может использовать поле типа и т. д.
  4. Подача и рассмотрение программы происходит относительно быстро, и моя подача заявки заняла около дня. Но проверка Alipay идет медленно
  5. Затем введите код вgithub.com/galan99
Категории