鸿蒙与微信小程序,鸿蒙远程交互应用 vs 微信小程序远程交互应用
原標題：鴻蒙遠程交互應用 vs 微信小程序遠程交互應用
鴻蒙的遠程交互組件應用相對復雜，訪問網絡時，首先要配置網絡權限，華為官方文檔有問題，在此引用我老師配置的模板，見附件。
過程：
導入鴻蒙的網絡請求模塊 fetch。
發起對服務器的請求。(在這過程中需要用 JSON.parse 將括號中的數據轉換成 json 數據格式，具體見代碼中標注 )
01
js 業務邏輯層
//導入鴻蒙的網絡請求模塊fetch
importfetch from'@system.fetch';
exportdefault{
data: {
title: 'World',
currentTime: '',
temperature1: '',
text: '',
},
onInit {
//發起對心知天氣服務器的請求
fetch.fetch({
url: 'https://api.seniverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans&unit=c',
responseType: 'json',
success: ( resp)=>{
//JSON.parse(字符串)轉換成json數據格式
letweatherInfo= JSON.parse(resp.data);
this.currentTime=weatherInfo.results[ 0].last_update;
this.text=weatherInfo.results[ 0].now.text;
this.temperature1=weatherInfo.results[ 0].now.temperature;
}
});
}
}
02
渲染層
{{currentTime}}{{temperature1}}
{{temperature1}}
{{text}}
03
css 樣式屬性設置
.container{
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.time{
font-size: 50px;
text-align: center;
width: 200px;
height: 1200px;
}
最終效果呈現：
04
微信小程序的遠程交互應用
js 業務邏輯層：
// pages/images/weather/weather.js
Page({
/**
* 頁面的初始數據
*/
data: {
weatherInfo:{},
nextweatherInfo:{}
},
/**
* 生命周期函數--監聽頁面加載
*/
: function( options){
//微信小程序請求天氣
wx.request({
url: 'https://api.seniverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans&unit=c',
success: ( resp)=>{
letinfo=resp.data;
console.log(info);
this.setData({ weatherInfo:info})
}
})
//微信小程序請求生活指數
wx.request({
url: 'https://api.seniverse.com/v3/life/suggestion.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans',
success: ( resp)=>{
letlive=resp.data
console.log(live)
}
})
//微信請求未來三天氣預報
wx.request({
url: 'https://api.seniverse.com/v3/weather/daily.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans&unit=c&start=-1&days=5',
success: ( resp)=>{
lettime=resp.data;
console.log(time)
this.setData({ nextweatherInfo:time.results[ 0].daily})
}
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function( ){
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function( ){
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function( ){
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function( ){
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function( ){
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function( ){
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function( ){
}
})
渲染層：
< text>{{weatherInfo.results[0].last_update}}{{weatherInfo.results[0].location.name}}{{weatherInfo.results[0].now.text}}{{weatherInfo.results[0].now.temperature}} text>
< viewclass= "margin"> view>
< viewclass= "top">
< blockwx:for= "{{nextweatherInfo}}">
< viewclass= "three">
< view>
< textclass= "txt1">{{item.date}} text>
view>
< view>
< textclass= "txt1">{{item.text_day}} text>
view>
< view>
< textclass= "txt1">{{item.wind_direction}} text>
view>
view>
block>
view>
wxss 樣式屬性設置：
/* pages/images/weather/weather.wxss */
.margin{
width: 100%;
height: 30px;
background-color: rgb(56, 168, 202);
}
.top{
width: 100%;
height: 50vh;
display: flex;
flex-direction: row;
justify-content: center;
margin: 5px;
}
.three{
width: 27%;
height: 50%;
border: 1pxsolid blue;
margin: 5px;
}
.txt1{
font-weight: bold;
font: size 15px;
}
最終效果呈現：
責任編輯：
總結
以上是生活随笔為你收集整理的鸿蒙与微信小程序,鸿蒙远程交互应用 vs 微信小程序远程交互应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浪客剑心是谁画的呢？
- 下一篇： 华为鸿蒙系统概念图,华为P50Pro概念