开发环境准备

获取APPID

小程序的 AppID 相当于小程序平台的一个身份证,后续会在很多地方要用到 AppID

开发工具

  • 微信小程序开发推荐以下工具
    • VS Code,下载地址:https://code.visualstudio.com/,使用VS Code开发需要安装minappwechat-snippetwxml插件
    • 微信自带的开发工具,戳下载地址,这里以微信小程序开发者工具为例
  • 创建项目,如果只是学习用测试号即可,当项目上线时可以用创建的APPID

小程序配置

语言结构

  • 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务
  • 小程序框架提供了自己的视图层描述语言WXMLWXSS ,以及JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑
结构 传统Web 微信小程序
结构 HTML WXML
样式 CSS WXCSS
逻辑 JavaScript JavaScript
配置 JSON

通过以上对比得出,传统web是三层结构。而微信小程序是四层结构,多了一层配置json

全局配置

  • 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
  • pages用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。如果需要新建一个index2页面,可以直接在app.JSON中添加并保存会自动生成相关文件,执行加载顺序按书写顺序加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"pages":[
// 第一个就是主页,首次展示的页面
"pages/index/index",
"pages/logs/logs",
"pages/index2/index2"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "全局首页",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}

小程序中新增/减少页面,都需要对 pages 数组进行修改

  • window用于设置小程序的状态栏、导航条、标题、窗口背景色。具体配置参数可以查看小程序全局配置
  • 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面

如果可视化页面没有反应一般是代码出错了

页面配置

  • 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.jsonwindow 中相同的配置项
  • 比如修改新建的index2.json文件
1
2
3
4
5
6
7
{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#00b26a",
"navigationBarTitleText": "全局首页2",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true
}

WXML

  • WXML ( WeiXin Markup Language )是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。具体可以参考官方文档WXML语法参考

数据绑定

  • 以新建的index2页面为例,修改WXML文件
1
2
3
4
5
<!--index.wxml-->
<view> {{message}}</view>
<view>num:{{num}}</view>
<view>isBoy:{{isBoy}}</view>
<view>person.name:{{person.name}} -- person.height:{{person.height}}</view>
  • 修改JS文件
1
2
3
4
5
6
7
8
9
10
11
12
13
// index.js
Page({
data: {
message:"Hello world 1",
num:1000,
isBoy:true,
person:{
name:"小李",
height:181
},
title:"这个是新页面index3"
}
})

列表渲染

  • 在组件上使用wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件
  • 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
  • 可以通过wx:for-item重新指定项的变量明,通过wx:for-index重新指定下标变量名
1
2
3
4
5
6
7
8
9
10
<view>
<!--循环一个数组-->
<view wx:for="{{arr}}" wx:key="{{index}}">
{{index}}:{{item}}
</view>
<!--循环一个对象-->
<view wx:for="{{person}}" wx:key="{{index}}" wx:for-index="key">
{{key}}:{{item}}
</view>
</view>
1
2
3
4
5
6
7
8
9
Page({
data: {
arr:["苹果","香蕉","西瓜"],
person:{
name:"小李",
hegiht:181
}
}
})

  • 渲染一个包含多节点的结构块block最终不会变成真正的dom元素
1
2
3
4
<!--循环一个数组-->
<block wx:for="{{arr}}" wx:key="{{index}}">
{{index}}:{{item}}
</block>

WXSS

  • WXSS(WeiXin Style Sheets)是一套样式语言 ,用于描述WXML的组件样式,详情可以参考WXSS语法参考
  • 与CSS相比,WXSS扩展的特性有:
    • 尺寸单位
    • 样式导入

尺寸单位

  • rpx ( responsive pixel) :可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
  • 如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素, 1rpx = 0.5px = 1物理像素
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px= 2rpx
iPhone6 Plus 1rpx = 0.552px 1px= 1.81rpx
  • 建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准
  • 注意:在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况
1
<view class="box1">Box1</view>
1
2
3
4
5
6
.box1{
width: 100rpx;
height: 100rpx;
font-size: 100rpx;
background-color: aqua;
}

使用px做单位,无论屏幕多大宽度都不会变,而rpx会根据屏幕宽度自适应

样式导入

  • 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
  • 首先在项目根目录即和pages同级目录创建stylues文件夹,在里面新建box.wxss样式文件
1
2
3
4
5
6
.lg_box{
width: 200px;
height: 200px;
background-color:aqua;
font-size: 50px;
}
  • index2.wxml文件中添加类名lg_box
1
<view class="lg_box">index2</view>
  • 最后在index2.xcss中导入外部样式
1
2
/*导入功能*/
@import "../../stylues/box.wxss"

全局样式

  • 定义在app.wxss中的样式为全局样式,作用于每一个页面。 在pagewxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器
  • 比如在app.wxss中定义全局样式
1
2
3
view{
font-size: 50px;
}
  • 所有<view>标签内的文本都改变了字体大小