微信小程序(应用号)组件详细介绍

所属分类: 网络编程 / 其它综合 阅读数: 1853
收藏 0 赞 0 分享

这篇文章主要讲解微信小程序的组件。

  首先,讲解新建项目。现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了。技术新,既然讲解,那我们就从开始建项目讲解。

  打开微信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的界面。

更多精彩内容其他人还在看

GitHub 热门:别再用 print 输出来调试代码了

本文给大家分享GitHub 热门:别再用 print 输出来调试代码了的详细解说,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

将来会是Python、Java、Golang三足鼎立的局面吗

python的优势在于数据处理和人工智能等方向,所以go只可能吞噬Java的份额,很难撼动Python的奶酪,所以将来会是Python、Java、Golang三足鼎立的局面吗
收藏 0 赞 0 分享

EventStore文件存储设计详解

ENode是一个CQRS+Event Sourcing架构的开发框架,这篇文章主要介绍了EventStore文件存储设计 ,需要的朋友可以参考下
收藏 0 赞 0 分享

简单实用的aixcoder智能编程助手开发插件推荐

本文给大家分享一款简单实用的aixcoder智能编程助手开发插件推荐 ,需要的朋友可以参考下
收藏 0 赞 0 分享

分享4个最受欢迎的大数据可视化工具

大数据可视化是进行各种大数据分析解决的最重要组成部分之一。这篇文章主要介绍了4个最受欢迎的大数据可视化工具,需要的朋友可以参考下
收藏 0 赞 0 分享

Spark在Windows下的环境搭建方法

这篇文章主要介绍了Spark在Windows下的环境搭建方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Django 使用 cookie 实现简单的用户管理功能

这篇文章主要介绍了Django 使用 cookie 实现简单的用户管理功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

eBay 打造基于 Apache Druid 的大数据实时监控系统

Apache Druid 是一个用于大数据实时查询和分析的高容错、高性能开源分布式时序数据库系统,旨在快速处理大规模的数据,并能够实现快速查询和分析。这篇文章主要介绍了eBay 如何打造基于 Apache Druid 的大数据实时监控系统?需要的朋友可以参考下
收藏 0 赞 0 分享

人工智能(AI)首选Python的原因解析

Python虽然是脚本语言,但是因为容易学,迅速成为科学家的工具。Python 已经是数据分析和 AI的第一语言,网络攻防的第一黑客语言,正在成为编程入门教学的第一语言,云计算系统管理第一语言
收藏 0 赞 0 分享

Hadoop分布式集群的搭建的方法步骤

这篇文章主要介绍了Hadoop分布式集群的搭建的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多