单页类型小程序是什么样的?单页类型小程序怎么制作?

时间：2023-07-01 14:05 阅读数：66 人阅读分类：知识百科

　　微信小程序有很多种类型，单页类型就是其中的一种，也是近咱咱们要重点讲述的内容。单页类型小程序是什么样的?单页类型小程序怎么制作?今天小编就为大家带来单页类型小程序的相关内容，希望能对大家有所帮助。

　　单页类型小程序制作其实并不麻烦，今天咱们就来举个例子，单页面天气预报微信小程序的制作。制作过程如下：

　　main.wxml

　　{{today.wendu}}℃

　　友情提示： {{today.ganmao}}

　　注意：在编辑HTML文件的时候，我们先把文件里面的框架先打起来，然后在去写CSS，这样才能写出优雅。

　　main.wxss

　　.content{

　　font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;

　　font-size: 14px;

　　background-size: cover;

　　width: 100%;

　　height: 100%;

　　background: url(../assets/images/bg.jpeg);

　　color: #fff;

　　}

　　.info{

　　padding: 20px;

　　background: #fff;

　　background: rgba(0, 0, 0, .5);

　　box-shadow: 10px,10px,20px,rgba(0, 0, 0, .5);

　　border-radius: 5px;

　　}

　　.today{

　　padding-top: 30rpx;

　　height: 50%;

　　}

　　.temp{

　　font-size: 50px;

　　text-align: center;

　　}

　　.weather{

　　text-align: center;

　　margin-bottom: 20rpx;

　　}

　　.city{

　　color: white;

　　font-size: 16px;

　　text-align: right;

　　margin-right: 10rpx;

　　margin-top: 30rpx;

　　}

　　.future{

　　display: flex;

　　flex-direction: row;

　　height: 60%;

　　padding-left: 5rpx;

　　background:#FFFFFF;

　　background:rgba(0, 0, 0, 0.1);

　　box-shadow:10px 10px 20px rgba(0,0,0,0.5);

　　text-align: center;

　　padding-top:10rpx;

　　padding-bottom:20rpx;

　　margin-top: 270rpx;

　　margin-bottom: 200rpx;

　　}

　　.future-item{

　　min-height:320rpx;

　　width: 165rpx;

　　margin-left: 10rpx;

　　margin-right: 10rpx;

　　border: 1px solid coral;

　　border-radius:10px;

　　padding-top:10rpx;

　　}

　　.future-item view{

　　margin-top:10px;

　　}

　　这个就没有什么可说的了，就是css样式。

　　main.js

　　Page({

　　data:{

　　newCity:" ",

　　onLoad:function(options){

　　// 页面初始化 options为页面跳转所带来的参数

　　this.loadInfo();

　　onReady:function(){

　　// 页面渲染完成

　　onShow:function(){

　　// 页面显示

　　onHide:function(){

　　// 页面隐藏

　　onUnload:function(){

　　// 页面关闭

　　loadInfo:function(){

　　var _this=this;

　　wx.getLocation({

　　type: 'gcj02', //返回可以用于wx.openLocation的经纬度

　　success: function(res) {

　　var latitude = res.latitude

　　var longitude = res.longitude

　　console.log(latitude+"+++"+longitude);

　　_this.loadCity(latitude,longitude);

　　}

　　})

　　loadCity:function(latitude,longitude){

　　var _this=this;

　　wx.request({

　　url: 'api.map.baidu/geocoder/v2/?ak=NRdxFogcgGCystGBQBmULnfaHVikzfyk&location='+latitude+","+longitude+"&output=json", //仅为示例，并非真实的接口地址

　　header: {

　　'content-type': 'application/json'

　　success: function(res) {

　　console.log(res);

　　var City=res.data.result.addressComponent.city;

　　// console.log(City);

　　City=City.replace("市","")

　　_this.setData({newCity:City});

　　_this.loadWeather(City);

　　}

　　})

　　loadWeather:function(newcity){

　　var _this=this;

　　wx.request({

　　url: 'wthrcdn.etouch/weather_mini?city='+newcity, //仅为示例，并非真实的接口地址

　　header: {

　　'content-type': 'application/json'

　　success: function(res) {

　　console.log(res);

　　var future=res.data.data.forecast;

　　var todayInfo=future.shift();

　　var today=res.data.data;

　　today.todayInfo=todayInfo;

　　_this.setData({future:future,today:today});

　　}

　　})

　　}

　　})

　　以上就是小编为大家整理的单页类型小程序的相关内容了哦，单页类型小程序是微信小程序中的一种，制作过程其实并没有大家想象中的那么复杂，大家可以仿照以上步骤来制作自己的单页类型小程序。如果您还想了解更多的微信公众号素材资讯的话，那就请多多关注微微风吧!