开发环境准备

获取APPID

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

开发工具

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

小程序配置

语言结构

  • 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务
  • 小程序框架提供了自己的视图层描述语言WXML 和WXSS ，以及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.json 的window 中相同的配置项
  • 比如修改新建的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中的样式为全局样式，作用于每一个页面。 在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器
  • 比如在app.wxss中定义全局样式
1
2
3
view{
  font-size: 50px;
}
  • 所有<view>标签内的文本都改变了字体大小