微信小程序（应用号）组件详细介绍
这篇文章主要讲解微信小程序的组件。
首先，讲解新建项目。现在有句话：招聘三天以上微信小程序开发，这个估计只能去挖微信的工程师了。技术新，既然讲解，那我们就从开始建项目讲解。
打开微信web开发者工具，如上图。点击添加项目，会出现新建项目页面，如下图：
其中AppID随意填写。ps：正式开发了估计有要求的。填写项目名称并选择保存的路径，添加项目就ok了。
就这样，一个hello world 就OK了。
古人云，一图胜千言，大家直接看图就ok
好了，我们现在开始讲解微信小程序的组件。
先倒入官方流出的demo文件。可以到微信小程序开发群：390289365 的共享文件里下载。导入后入下图：
这里可以看到一个能看到的一些组件。我们打开源码，很熟悉多界面，入口文件为app.js这和好多框架都类似。
是不是发现一个新的东西？还是两个新的东西？哈哈。。。以wxml和wxss结尾的文件，但是，具体这个怎么解读呢？wxml我不知道该说w－xml还是wx－xm。这个文件打开以后是布局，类似wpf的xaml布局。wxss呢，我猜应该是微信css吧，即使我们的css文件。这样一来，是不是前端同学感觉好熟悉，类似平常开发的html（wxml），css（css）js（类似node.js写法，或则就是吧）。
因为组件还算丰富啊，这篇肯定介绍不完，这先介绍几种。
一。我们先看demo的效果图，小程序演示，五个字，这五个字的地方，就说类似移动开发的，导航bar了，这个说可以类似IOS开发一样，可以总体设置。在哪呢？就如下图：
这个navigationBar我想肯定也能动态控，但是我没从api中看到，应该后续官方文档肯定也会有说明吧。
二。View元素，这个view和react native 类似，和html开发中的div一样，是一个块级的。可以设置样式，如图中的右侧红圈的样式。这样几乎和html的布局一样了，连css语法都一样。view和view可以嵌套，和div一样，可以设置margin，padding，display，block，全局＊都样式等方式。前端的小伙伴说不是觉得做这个界面开发没压力？
三。navigator 下面这两个图说折叠和展示，其实就是控制包含navigator组的view展示与隐藏实现的，后面代码会说明。
点击内容分区，三个navigator的父级view现实，再点击，隐藏。想一想，这如果在html中，这应该是js控制吧，但是在微信web小程序开发呢，看代码：
“js”代码是有了，但是“click”方法的绑定呢？，但是翻边demo代码也没发现click的影子。其实在这里微信web小程序开发上用了内嵌的绑定方式，淡然绑定的关键字也不是click了，而是bindtap，如下图：
对用的“widgetsToggle”就是上上图的“click“事件。通过后台的 typeviewShow来展示前台。
四。text 这个酒类似我们html开发中的label或则span，是一个小块级元素。这里不多说明来。
五。navigator，这个做我们页面中的跳转，其中url属性指向的跳转多目标页面。
六。image 这个就是img咯，src和html开发的一样咯。
今天的说明就到这吧，明天接着写，明天尽量介绍一部分，然后模仿个原生app的界面。
相关推荐
-
微信小程序前端源码逻辑和工作流
废话不多说,直接分析前端代码. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] log
-
微信小程序下载工具及调试详解
昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,
-
微信小程序应用号开发体验
昨天微信小程序(应用号)内测的消息把整个技术社区炸开了锅,我也忍不住跟了几波,可惜没有内测资格,听闻破解版出来了,今天早上就着原来的项目资源试开发了一下,总结一下体验. 总体体验 开发效率高,6:40左右破解完IDE,7:20左右点做完了首页和导航栏的布局,微信把觉见的布局都做了封装,比传统的前端开发效率高. 前端可以快速上手:熟练的前端可以很快上手,可能只要一小时读文档的时间加一个官方的例子. 开发工具难用,很多目录的操作和IDE常见的格式化代码,html配对等功能暂不支持. 开发限制了很多前
-
微信小程序 框架详解及实例应用
快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是
-
微信小程序搭建及解决登录失败问题
等了好久的小程序,终于在近日曝光了.现在就带大家来尝尝鲜.以下是一张随便看看的图. 一.构建微信小程序的步骤 下载开发工具 考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc. 破解的步骤就是:将破解压缩包的两个文件,放到如下图路径: 这个是MAC路径: 应用程序->微信web开发者工具->显示包内容 /Resources/app.nw/app/dist/compone
-
微信小程序（二）Window 配置详细介绍
window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖 只需在app.json配置即可 相关文章: hello WeApp icon组件 Window text组件 switch组件 tabBar底部导航 progress组件
-
微信小程序 开发指南详解
编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的
-
微信小程序开发实例详解
"小程序"破解IDE + Demo:https://github.com/gavinkwoe/weapp-ide-crack.git 资源汇总:https://github.com/Aufree/awesome-wechat-weapp 官方简易教程·MINA:http://wxopen.notedown.cn/ Hello小程序 - 非官方:http://www.helloxcx.com 微信应用号开发教程:https://my.oschina.net/wwnick/blog/750
-
微信小程序（应用号）简单实例应用及实例详解
Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正
-
微信小程序应用号开发教程详解
微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教