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
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 百度快照 什么是百度快照? 它如何帮助SEO?

    1.什么是百度快照? 百度快照是一个基本概念,之前也曾提到过。 例如,如果您在百度上搜索 小熊吧织梦仿站 ,则搜索到的网站后面会出现百度快照。 单击第一个百度快照,顶部显示…

    08-08 09:37 177
  • 微信小程序 小程序实现简单语音聊天

    框架相关 Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信 小程序 的云开发的存储。 储备知识 微信小程序录音控制器:recorderManager。 微信小程序音频控制器:…

    07-28 09:09 183
  • 自适应 电脑pc端的网页自适应显示在移动端方法

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

    07-02 10:26 107
  • 微信小程序 微信小程序开发组件初步使用和配置

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

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

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

    04-12 13:56 167