前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发详解《二》开发组件使用初步,配置

微信小程序开发详解《二》开发组件使用初步,配置

作者头像
极乐君
发布2018-02-05 16:36:10
7700
发布2018-02-05 16:36:10
举报
文章被收录于专栏:极乐技术社区

一:开发组件使用初步

1:建立一个微信小程序的工程

2:请参考如下链接里面的内容,这是微信小程序的官方开发指南:

https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222

3:可以拷贝部分例子程序到你建立的工程中,使用微信小程序的组件,下图所示:

我们在first.wxml中可以写first这个页面的布局,例如图1中我们写了一个字符串:“1234567890abcdefg”,在这个字符下面我们写了一个微信小程序的button,button显示的内容为“default”,type=“default”---这个是表示该button为默认的显示效果,如图1左边模拟器中显示为圆角淡灰色按钮左右两边无边距。

注:很多网友会发现:在微信小程序开发工具中编写完代码然后,点击微信小程序开发工具左侧下方的“编译”按钮后,模拟器中并没有反应,其实这是因为,你编写完代码应该敲击键盘的Ctrl+s,保存代码,然后再点击“编译”,这样才能在模拟器中显示出对应代码的效果。

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

我们下面实现一个功能:点击按钮后,按钮的内容更换新的内容

1)在first.wxml中加入如下代码:其中bindtap="btnClick"为按钮的点击时间绑定的方法:btnClick(),{{btnText}}为按钮显示的内容绑定的变量:btnText

<button type="primary" bindtap="btnClick"> {{btnText}} </button>

2)方法:btnClick()和变量:btnText都要在first.js中实现,如图所示

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

5:text组件使用初步:

我们下面实现一个功能:点击按钮后,把text组件的初始内容进行修改,然后再点击按钮,text组件内容消失,然后再点击按钮,text组件内容出现。。。。。。以此类推。

1)在first.wxml中加入如下代码:

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

在first.js中加入如图代码

6:内容列表

在first.wxml中加入如下代码:

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

在first.js

data:{ }

中加入如下代码:

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

结果下图所示:

7:页面加入头部和脚部

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

在文件中增加下图所示代码

模拟器显示结果下图

二:微信小程序配置

1:参考https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161222

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

如图所示:


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-01-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档