微信小程序初步使用

小程序

目录结构

目录结构分别由

• pages — 各个页面
• • index — 页面的wxml,wxss,js
• app.js
• app.json
• app.wxss – 全局样式
• 配置文件

构成

wxml

微信小程序里充当html的角色，用于编写结构

和html非常相似，由标签，属性等等构成，但又有不同。

组件

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。

就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：

<map></map>

常用组件

1. view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
2. text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
3. image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
4. button 这个是按钮组件。
5. input 这个是输入框组件。
6. navigator 这个是导航组件。

wxss 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

• 新增了尺寸单位。 rpx 免去换算烦恼

• WXSS 仅支持部分 CSS 选择器