导航:首页 > 编程语言 > 小程序组件位置

小程序组件位置

发布时间:2021-12-08 11:08:41

『壹』 小程序js怎么给控件设置位置

  1. JS设置类名

    1. 添加类名或者移除类名来进行实现,在类里面书写控件位置的样式;

  2. JS设置style的方式

    1. 把控件位置的样式写在style里面

JS设置类名的案例:

『贰』 微信小程序怎么获取组件的属性

可以把组件的属性写到data-xxx里面 当点击的时候获取
比如

<buttonsize="mini"data-button_size="mini"bindtap="click"><button>

然后在点击事件里面获取button-size就可以了

『叁』 微信小程序前端能在一个组件中插入另一个组件吗

当然可以,组件嵌套,使用solt

『肆』 开发中怎样在小程序中添加天气组件

首先分析制作的思路:

1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径。

2.在main.js文件中,在onLoad()函数中调用loadInfo()函数。

3. 自定义获取位置的函数loadInfo(),调用wx.getLocation,用于获取当前的纬度(latitude)和经度(longitude)。在loadInfo()函数中接着调用loadCity()函数。

4. 自定义获取城市的函数loadCity(),调用wx.request,在“网络地图开放平台”网站中注册自己的AK,通过获取城市信息的网址(http://api.map..com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json)实现当前城市名称的获取。

在loadCity()函数中接着调用loadWeather()函数。

5.自定义获取天气的函数loadWeather(),根据已有的城市名称,通过获取天气信息的网址(http://wthrcdn.etouch.cn/weather_mini?city=城市名)实现天气信息的数据获取。

6.在main.wxml文件中,未来天气部分通过import调用了自定义模板文件itemtpl.wxml。

然后分析项目中文件的源码。

app.json文件的代码如下:

{

"pages":[

"pages/main/main",

"pages/template/itemtpl",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "天气",

"navigationBarTextStyle":"black"

}

}

main.wxml的代码如下:

<view class='cont'>

<!-- 今日天气-->

<view class='today'>

<view class='info'>

<view class='tempe'>{{today.wen}}°C</view>

<view class='weather'>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view>

<view>温馨提示:{{today.ganmao}}</view>

<view class='city'>{{city}}</view>

</view>

</view>

<!-- 未来天气-->

<import src="../template/itemtpl"/>

<view class='future'>

<block wx:for="{{future}}">

<template is="future-item" data="{{item}}"/>

</block>

</view>

</view>

main.wxss文件的代码如下:

/**/

.cont{

font-size:30rpx;

width:100%;

height:100%;

}

.today{

padding:50rpx 0 0 0;

height:50%;

}

.info{

padding:20rpx;

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

line-height: 1.5em;

color:#eee;

}

.tempe{

font-size:90rpx;

text-align: center;

margin:30rpx 0;

}

.weather{

text-align: center;

}

.city{

font-size:40rpx;

color:#f60;

text-align: right;

margin: 30rpx 10rpx 0 0;

}

.future{

display:flex;

flex-direction: row;

height:100%;

padding:20rpx 0 20rpx 10rpx;

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

text-align: center;

margin:50rpx 0 70rpx 0;

color:#eee;

}

.future-item{

min-height: 100%;

width:160rpx;

margin: 0 10rpx;

border:solid 1px #f90;

padding:10rpx 0 0 0;

line-height:2em;

}

main.js文件的代码如下:

//

Page({

data: {

// weatherData:''

city:"" ,

today:{},

future:{},

},

onLoad: function () {

this. loadInfo();

},

//自定义获取位置

loadInfo:function(){

var page=this;

wx.getLocation({

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

success: function (res) {

var latitude = res.latitude

var longitude = res.longitude

console.log(latitude, longitude);

page.loadCity(latitude, longitude);

}

})

} ,

//自定义获取城市

loadCity: function (latitude, longitude){

var page = this;

wx.request({

url: 'http://api.map..com/geocoder/v2/?ak=自己的AK &location=' + latitude + ',' + longitude + '&output=json',

header: {

'content-type': 'application/json'

},

success: function (res) {

console.log(res);

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

city=city.replace("市","");

page.setData({

city:city

});

page.loadWeather(city);

}

})

},

//自定义获取天气

loadWeather: function (city) {

var page = this;

wx.request({

url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + city,

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;

page.setData({

today:today,

future:future,

});

}

})

}

})

itemtpl.wxml的代码如下:

<!-- 模板文件-->

<template name="future-item">

<view class="future-item">

<view>{{item.date}}</view>

<view>{{item.type}}</view>

<view>{{item.fengxiang}}</view>

<view>{{item.low}}</view>

<view>{{item.high}}</view>

</view>

</template>

至此,案例制作完成。

『伍』 小程序loading组件在哪

安卓系统改变的方法如下: 依次打开 系统设置-应用程序-选择默认的那个程序(这里就选择微信)-清除默认值即可。

『陆』 微信小程序 怎么 选择组件 做操作

微信小程序怎么选择组件,怎么操作,我们可以通过以下方式:
一、常规代码式
一般有技术实力的公司开发小程序是依照微信官方的代码形式开发,这种方法优点就是,制作出的小程序界面、样式排列各不相同,功能也比较丰富。但是一般中小型传统企业并不具备这种开发实力。
原因:a、因为没有实力的专业开发人员;
b、没有太充足的开发资金提供;
c、对微信小程序未来发展和互联网的发展认知不够。
二、专业的第三方微信小程序开发公司
这类企业都有专门的技术团队和丰富的开发经验,商家只要把需求提供给公司,然后跟技术进行交流一下,把你的想法和需求说明,就可以开始了,而且这种开发方式开发价格较低,一般根据功能也就几千,贵的话也就是一两万既可以实现。

『柒』 微信小程序组件demo在哪

解决方案资源管理器,在视图下拉菜单里

『捌』 小程序怎么组件开发

要有ES6 基础.
css js 基础.
根据小程序官方的组件文档.
把每一个可以复用的功能设计成通用的. 然后创建成组件 调用使用.
细节太多. 可以追问

『玖』 小程序 哪些组件可覆盖在原生组件上

级别相同的,可以覆盖。位置一致、放在前端,就可以覆盖

阅读全文

与小程序组件位置相关的资料

热点内容
水蜜桃电子书txt全集下载 浏览:850
豫剧电影农村片 浏览:26
javaprivate类继承 浏览:487
电脑文件历史记录干什么用 浏览:136
如何去掉文件的只读属性 浏览:403
水沫缘浅的全部作品集下载 浏览:575
免费电影在线观看网站 浏览:697
涨奶挤出来的母乳电影 浏览:897
催眠控制类百合 浏览:13
编程属于哪个发票范围 浏览:207
ipadqq怎么下载群文件 浏览:272
投屏流畅的电影网站 浏览:506
手机书包网 浏览:694
版本的控制 浏览:2
编程中pls什么意思 浏览:891
窗体小程序发送给女生 浏览:219
win10字好模糊 浏览:694
win10宽带用户名和密码是什么 浏览:568
ipad如何下载花瓣邮箱app 浏览:488
红米note版本怎么安装软件 浏览:358

友情链接