微信小程序-简易教程-代码构成

2018-03-19 阅读量

一、基本构成

weixin

.josn后缀的JSON配置文件;
.wxml后缀的WXML模版文件;
.wxss后缀的WXSS样式文件;
.js后缀的JS脚本逻辑文件;

二、JSON配置

1.小程序配置app.json - 项目根目录的app.json

1)对当前小程序的全局配置(所有页面路径、界面路径、网络超时时间、底部tab等);

2)初始项目app.json配置内容如下：
{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "windows":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
    }
}

    •pages字段-用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

    •window字段-小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

小程序的配置app.json

2.工具配置project.config.json - 项目根目录的project.config.json

工具配置:针对各自喜好做个性化配置(界面颜色、编译配置等),每次配置更新都会写入此文件中，变更工作环境(电脑、开发工具等)需要要载入同一个项目的代码包即可。

开发者工具的配置

3.页面配置page.json - pages/logs目录的logs.json

eg:

如果小程序整体风格是蓝色调，那么可以在app.json里面声明顶部颜色是蓝色即可。
如果小部分是其他色调，只需要在对应的page.json中修改页面的相关属性即可。

小程序的配置page.sjon

三、WXML模版

1.网页和小程序的语言对比：

网页：HTML + CSS + JS
    • HTML:描述当前页面结构;
    • CSS:描述页面样式;
    • JS:通常用来处理页面和用户的交互;
小程序：WXML + WXSS + JS

2.相同:

WXML充当的就是类似HTML的角色,与HTML非常相似,有标签、属性等构成;

3.不同之处:

• 标签名字有点不一样：
        HTML(div、p、span等) - 日历、弹窗等
        小程序(view、button、text等) - 封装好的控件、地图、视频、音频等
• 多了一些wx::if这样的属性以及{{}}这样的表达式
        网页开发:通过JS操作DOM(对应HTML的描述产生的树),以引起界面的变化响应用户行为;
        小程序思路:把渲染和逻辑分离(JS不能直接操作DOM,只需要管理状态，通过一种模版语法来描述状态和界面结构的关系即可);

eg1:网页操作

用户点击按钮的行为响应：
当用户点击某个按钮时，JS会记录一些状态到JS变量中，同时通过DOM API操控DOM的属性或者行为，进而引起界面的相关变化。
弊端：当项目越来越大时，代码会充斥着非常对的界面交互逻辑和程序的各种状态变量，这不是很友好的开发模式，因此就有了MVVM的开发模式(React,Vue):把渲染和逻辑分离。

eg2:小程序

在界面显示Hell World字符串:
WXML:
<text></text>

JS只需要管理状态即可:
this.setData({msg:"Hell World"})

解释：
通过{{}}的语法把一个变量绑定到界面上 - 数据绑定。
仅仅通过数据绑定还不能够完整描述状态和界面的关系，还需要if/else,for等控制能力（小程序都用wx::开头的属性表达）。

WXML

四、WXSS样式

WXSS具有CSS大部分特性，在小程序中修改和扩充：

1.新增尺寸单位;

写CSS时，开发者需要考虑手机设备屏幕的不同宽度和像素比，采用一些技巧换算一些像素单位。
WXSS在底层支持新的尺寸单位rpx,由于换算的浮点数原因，导致运算结果和预期结果有一点点偏差。

2.提供全局的样式和局部样式；

3.WXSS仅支持部分CSS选择器；

WXSS

五、JS逻辑交互

小程序中通过编写JS脚本文件来处理用户操作。

<view>{{msg}}</view>
<button bindtap="clickMe">点击我</button>

点击button时，把界面的msg显示成“Hello World”，在button上声明一个属性:bindtap,在JS文件里面声明clickMe方法来响应点击操作：

JS
Page({
    clickMe:function(){
        this.setData({msg:"Hello World"})
    }
})

还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

参考资料：

3.小程序开发指南
4.教程指引
5.小程序小故事