ltb8r.com

微信小程序开发组件初步使用和配置

微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。

开发组件使用初步

我们可以在first.wxml中编写首页的布局。 例如,在图1中,我们编写了一个字符串:“ 1234567890abcdefg”。 在此字符下方,我们为微信小程序编写了一个button。 该button将内容显示为“default”,type=“default”---这意味着该按钮是默认显示效果。

如图1左侧的模拟器中所示

微信小程序开发组件初步使用和配置

按钮显示内容和点击事件的绑定

我们实现以下功能:单击按钮后,按钮的内容将替换为新内容

  • 在first.wxml中添加以下代码:bindtap =“ btnClick”是按钮单击时间绑定的方法:btnClick(),{{btnText}}是绑定到按钮显示的内容的变量:btnText
    <button type="primary" bindtap="btnClick"> {{btnText}} <button>
  • 方法:btnClick()和变量:btnText都要在first.js中实现,

    如图2所示

    微信小程序开发组件初步使用和配置

  • 按钮点击前和点击后,模拟器显示效果如图3所示

    微信小程序开发组件初步使用和配置

text组件使用初步

我们实现以下功能:点击按钮后,修改text组件的初始内容,然后再次点击按钮,text组件的内容消失,然后再次点击按钮,出现text组件的内容

在first.wxml中加入如下代码

<text wx:if="{{isTextShow}}">{{text}}<text>

在first.js中加入如图4代码

微信小程序开发组件初步使用和配置

内容列表

first.wxml中加入如下代码

<view wx:for="{{news}}" wx:for-item="newsItem">
    {{index}}: {{newsItem}}
<view>

在first.js

data:{ }

中加入如下代码

news:['第1行信息','第2行信息','第3行信息']

结果如图5所示

微信小程序开发组件初步使用和配置

页面加入头部和脚部

新建文件夹templates,并在文件夹下新建文件:footer.wxml和header.wxml

在文件中增加如图6所示代码

模拟器显示结果如图7

微信小程序开发组件初步使用和配置

微信小程序配置

这里讲解了APP的页面配置,window配置,tabBar配置,网络配置等信息

如图1,图2所示

微信小程序开发组件初步使用和配置

微信小程序开发组件初步使用和配置

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/91.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 自适应 电脑pc端的网页自适应显示在移动端方法

    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排…

    4分钟前 101
  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 104
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 153
  • 微信小程序 「开发阶段」微信小程序基础教程

    要开发微信小程序之前,需要做一些准备工作,例如,下载微信开发者工具、创建本地小程序项目,这样我们就进行简单的微信小程序开发。…

    04-10 10:59 92
  • 微信小程序 「网络请求」微信小程序开发中的http请求总结

    微信小程序中的网络通信只能与指定的域名进行通信,微信小程序包括四种类型的网络请求。普通的HTTPS请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile)、WebSocket通…

    04-09 10:15 95