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

一:开发组件使用初步

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配置,网络配置等信息

如图所示:


原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2017-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 ? js封装,注意红色部分为BUG修复,然后传入boxwid...

2055
来自专栏张善友的专栏

Remoting: Server encountered an internal error

发生这个错误的原因是Remoting的一个配置项: <customErrors> 元素   指示此应用程序域中的服务器通道是否将经筛选的或完整的异常信息返回给本...

1957
来自专栏Python

Git 忽略.idea/workspace.xml文件

在使用idea进行提交代码时,执行提交时一直出现modified:   .idea/workspace.xml 非常让人烦恼。

1.1K2
来自专栏前端人人

React多页面应用6(webpack4 开发环境打包性能初提升)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,...

41611
来自专栏vue学习

小程序 — wepy中使用有赞的vant-weapp组件

7132
来自专栏无原型不设计

【Mockplus教程】复制/克隆

复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在...

3173
来自专栏魏艾斯博客www.vpsss.net

WDCP 面板安装微擎的过程记录

现在最流行的微信管理系统非微擎莫属了,太多人使用微擎来管理自己的微信公众号和微信小程序。同时很多人自行搭建微擎程序时候遇到了难题,为了解决这个难题魏艾斯博客前面...

3290
来自专栏不想当开发的产品不是好测试

centos下安装pip2

# 背景 新机器,安装完python2后发现竟然不自带pip,按照我的理解现在新版本的python,不管是2还是3都会自带pip的。没办法,需要自己去安装pip...

2996
来自专栏DeveWork

代码重写WordPress网页标题为“原网页标题|网站名”的形式

为了那个所谓的搜索引擎优化(SEO),为了更高的收录,为了更多的流量,我们需要对WordPress做许多工作,重写WordPress网页标题就是其中之一,如果你...

2316
来自专栏我的博客

express4.2获取参数和视图

1.获取参数 router.get('/', function(req, res) { //console.log(req.query.a); //get a...

3155

扫码关注云+社区

领取腾讯云代金券