微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样。

首先,在微信小程序开发中,代码文件格式大体有以下四中:

.wxml .wxss .js .json

首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等。如果你之前开发的web客户端,那么你会发现,微信小程序的布局对你来说熟悉的简直不能再熟悉。

wxss 后缀的文件起始就是我们常见的css文件,只不过文件的后缀不同,在其中同样可以使用传统css中使用的种种属性。那么是否我们在css中使用的选择器是否可以在微信小程序中使用呢?

大体上我们常用的css选择器都是支持的。

那么需要注意的是,在我们之前的前端开发中,html中如果需要使用css,需要使用link标签来引入css文件,但是在微信小程序开发中,则不需要引入。微信小程序会自动的将.wxml .wxss .js .json这四种文件后缀的文件自动合成一个文件,这其中的逻辑和操作不需要我们去思考和操作。

.js 文件里面放置业务逻辑代码,主要语法就是JavaScript语法。而且在微信小程序开发中支持es6的语法,但是需要注意的是微信小程序并不是支持全部的es6语法,而且在编译的时候也是通过babel将es6的语法转换为es5的语法。

.json文件主要是放置一些当前页面的配置信息。

当然在开发微信小程序的时候,还有一点需要注意,就是在一个目录下面的代码文件,代码的名字最好一致。

__Tip:__

在开发微信小程序的时候,当进行页面的布局的时候可以使用一些ui库,也可以自己通过代码去设置样式,但是在自己写样式代码的时候,我个人还是比较推荐使用css3中新增加的flex布局方式。如果你不太属性,可以点击http://www.cnblogs.com/liujunhang/p/6992829.html这里参考。

微信小程序开发 -- 02的更多相关文章

  1. 微信小程序开发 [02] 页面注册和基本组件

    1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...

  2. 微信小程序开发笔记02

    今天学习了微信小程序开发用到的语言,wxml与wxss语言基本语法与html和css基本语法相似,学习起来相对简单.在小程序主要的语言是js(javascript,跟准确的说是jqery) ,由于这种 ...

  3. timestamp时间戳的应用(微信小程序开发也一样)

    在微信小程序开发时发现一个timestamp的时间戳的变量 比如获取微信运动步数时候 timestamp是如何形成的在JS中 是这么形成的 var timestamp = Date.parse(new ...

  4. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  5. 微信小程序开发环境安装以及相关设置配置

    微信小程序开发环境安装以及相关设置配置 一.安装 软件名称:wechat_devtools_1.02.1907232_x64 软件安装地址:https://developers.weixin.qq.c ...

  6. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  7. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  8. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  9. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

随机推荐

  1. 从源码角度入手实现RecyclerView的Item点击事件

    RecyclerView 作为 ListView 和 GridView 的替代产物,相信在Android界已广为流传. RecyclerView 本是不会有类似 ListView 的那种点击事件,但是 ...

  2. DirectFB的架构介绍

    **************************************************************************************************** ...

  3. hibernate 插入数据时让数据库默认值生效

    用hibernate做数据库插入操作时,在数据库端已经设置了对应列的默认值,但插入的数据一直为null.查找资料发现,原来是hibernate的配置项在作怪. Hibernate允许我们在映射文件里控 ...

  4. hadoop+hive+spark搭建(三)

    一.spark安装   因为之前安装过hadoop,所以,在“Choose a package type”后面需要选择“Pre-build with user-provided Hadoop [can ...

  5. OC中@class的使用

    作用: 可以简单地引用一个类简单使用@class Dog; //类的引入 #import "Dog.h"仅仅是告诉编译器:Dog是一个类;并不会包含Dog这个类的所有内容 具体使用 ...

  6. 进击 spring !!

    1.spring简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用某一个组件,同时为 J2EE 应用程序开发提供集成 ...

  7. redis-key相关命令

    本篇主要介绍和redis的key进行操作的相关命令. 命令 描述 复杂度 返回值 DEL key [key ...] 删除给定的一个或多个 key .不存在的 key 会被忽略.删除单个列表.集合.有 ...

  8. JAVA并发编程实战---第三章:对象的共享

    在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程序中,要对内存操作的执行顺序进行判断几乎无法得到正确的结果. 非原子的64位操作 当 ...

  9. Python数据类型之变量

    变量 在程序设计中,变数(英语:Variable,scalar)是指一个包含部分已知或未知数值或资讯(即一个值)之储存位址,以及相对应之符号名称(识别字).通常使用变数名称参照储存值:将名称和内容分开 ...

  10. Spring切面通知执行的顺序(Advice Order)

    问题描述 如果在Spring的程序中同时定义了环绕通知(Around)和前置通知(Before)..那么,有以下问题: 1.怎么让两个切面通知都起作用 2.或者让两者切面按自己指定的顺序进行执行? 3 ...