介绍 & lt; !——创建一个蓝色背景的观点,添加点击事件,并输出启动日志——比;
& lt;才能view , bindtap=癰indViewTap",类=癿yView"比;
,,,& lt; text 类=癿yView-clickK"在点我点我& lt;/text>
& lt;才能/view>
& lt; !——创建了一个文本标签,然后执行了JS交互,通过两个大括号,在index.js中进行赋值——比;
& lt;才能view 类=皍sermotto"比;
,,,& lt; text 类=皍ser-motto"在{{座右铭}}& lt;/text>
& lt;才能/view>
& lt;/view> .myView {
,,宽度:200 rpx;
,,身高:200 rpx;
,,margin-top: -100 rpx;
,,背景颜色:蓝色;
}
.myView {
,,显示:flex;
,,flex-direction:列;
,,对齐项目:中心;
,,宽度:200 rpx;
,,身高:200 rpx;
保证金才能:20 rpx;
,,这个特性:50%;
}
.myView-clickK {
,,margin-top: 75 rpx;
,,身高:50 rpx;
,,颜色:红色;
}
.usermotto {
,,margin-top: 100 rpx;
} 数据:,{
座右铭:& # 39;Hello 世界,你好,世界! & # 39;
}，//事件处理函数
bindViewTap:函数(),{
wx.navigateTo ({
url: & # 39; . ./日志/日志# 39;
})
},
这篇文章将为大家详细讲解有关微信小程序演示示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
用到了倒仰样式,文本组件,视图组件和JS代码的交互,大家要理解WXML, JS, wxs和JSON文件的用途及相互关系。
新建项目,然后在索引。wxml页面中创建相关控件
然后在索引。wxs文件中设计控件位置和属性样式,注意:
/* * rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750 rpx。如在iPhone6上,屏幕宽度为375 px,共750个有物理像素,
则750 rpx=375 px=750物理像素,1 rpx=0.5 px=1物理像素。开发建议:
开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。ui设计图建议:使用
设计稿使用设备宽度750 px比较容易计算750 px的话1 rpx=1 px,这样的话,设计图上量出
来的尺寸是多就少px是多少rpx * */
具体代码如下:
对应页面的交互功能逻辑写在索引。js文件中,如下所示:
设置导航样式,需要在应用程序。json中进行设置
效果展示:
打击可以看的到,当我们点击蓝色区域的【点我点我】,在其下方会出现& # 39;Hello World,你好,世界! & # 39;这些文字。这就是最简单的触碰事件及其处理效果的示例。
关于“微信小程序演示示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
