1.1开发开发准备

开发微信小程序前首先要在微信公众平台申请一个小程序账号，通过这个账号对小程序的开发进行管理。

点击 + 号，新建项目

如上图所示填写信息时 AppID 填写各自申请的小程序账号的 AppID，不使用云开发，选择 Javascript 基础模板

2.2 目录结构

创建小程序项目后会初始小程序的目录结构，我们先来了解一下这些文件和目录的作用，这对于我们学习小程序开发非常有帮助。

我们将从两个方面入手来介绍小程序的目录结构：文件类型和特定名称的文件。

先来看文件类型，小程序主要提供了 4 种文件类型：

类型名称	作用	是否必须存在
.wxml	用于页面的布局结构，相当于网页中 .html 文件	是
.wxss	用于页面的样式，相当于网页中的 .css 文件	否
.js	用于页面的逻辑	是
.json	用于页面的配置	否
再来看一些特定名称的文件：

文件名	作用	是否必须存在
app.js	小程序入口（首先执行的文件）	是
app.json	小程序的全局配置	是
app.wxss	小程序的全局样式	否
project.config.json	小程序开发者工具配置	是（会自动创建）
sitemap.json	小程序搜索优化	否

组件

小程序里没有div span img 但有其他新标代替

1. view定义一个块级元素相当于div
2. text定义一个行内元素相当于span
3. weiper轮播图标签
4. weiper-item轮播图可滑动的每一个区块
5. image图片标签

属性名	默认值	作用
indicator-dots	false	是否显示面板指示点
autoplay	false	自动播放轮播图
circular	false	循环播放轮播图
indicator-color	rgba(0, 0, 0, .3)	小圆点颜色
indicator-active-color	#000000	当前选中的指示点颜色

关于小程序页面布局中的样式几乎和网页的 css 是一样的

定义初始数据

• 在index.js里必须调用一个全局函数page至少要传入一个空对象作为它的参数否则可能会报错

Page({
  data: {
    message: "大家好，这是我的第一个小程序",
    num: 1,
  },
});

调用数据使用插值{{}}

  {{num}} -1
</view>

监听事件

bind固定语法tap事件名sayHi回调函数

<button bind:tap="sayHi">点击一下</button>

调用函数使用方法在index.js中的Page调用

Page({ data: { msg: '大家好，这是我开发的第一个小程序！', }, sayHi() { console.log('按钮被点击了...') }, })

更新数据 this.getData({xx：“修改的值”})

Page({
  data: {
    msg: "大家好，这是我开发的第一个小程序！",
  },

  sayHi() {
    console.log("按钮被点击了...");
    // 错误的写法！
    // this.msg = 'Hello everybody，this is my first miniprogram!'
    // 正确的写法
    this.setData({
      msg: "Hello everybody，this is my first miniprogram!",
    });
  },
});

读取数据this.data.要读取的值

 // 读取
    console.log(this.data.message);

全局配置即小程序根目录中的 app.json 它的最外层是一个对象，可以包含一些常见的配置项：

配置项	类型	是否必须	说明
pages	string[]	是	页面路径列表
window	object	否	全局的默认窗口表现
tabBar	object	否	底部 tab 栏的表现
entryPagePath	string	否	小程序默认启动首页

1. pages 的值是一个数组，所有页面的路径都要写在这个数组里，否则页面无法被访问到，数组的第一个单元为小程序的启动首页。

json

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

跳转组件

组件名	作用	与 htm 对比
navigator	地址跳转	相当于 html 中的 a 标签

2. window 的值是一个对象，通过它可以全局配置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	说明
navigationBarTitleText	string	空白	导航栏标题文字内容
navigationBarTextStyle	string	black	导航栏标题颜色，仅支持 black / white
navigationBarBackgroundColor	16 进制颜色	#00000	导航栏背景颜色，如 #000000
navigationStyle	string	default	导航栏样式，仅支持 default / custom
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新
... 还有更多

json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#f5a11c",
    "enablePullDownRefresh": true
  }
}

1. tabBar 定义小程序 tab 栏的表现，如下图即所谓的 tab 栏：

定义 tab 的内容有些多，大家参照着上图和下面的表格来对小程序的 tab 栏进行配置：

属性	类型	默认值	是否必须	说明
list	array	无	是	tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
color	16 进制颜色	无	否	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	16 进制颜色	无	否	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	16 进制颜色	无	否	tab 的背景色，仅只持 16 进制颜色
borderStyle	string	black	否	tabbar 上边框的颜色， 仅支持 black / white
position	string	bottom	否	tabBar 的位置，仅支持 bottom / top

上述配置中 list 具体又包含以下内容：

属性	类型	默认值	是否必须	说明
pagePath	string		是	页面路径，必须在 pages 中先定义
text	string		是	tab 上按钮文字
iconPath	string		否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon
selectedIconPath	string		否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon

以上的配置不用刻意的去背，根据需要随时查看文档就可以，以下为完整示例代码：

json

{
  "pages": [
    "pages/index/index", 
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    导航标题
    "navigationBarTitleText": "小程序示例",
    导航栏标题颜色
    "navigationBarTextStyle": "white",
    导航背景颜色
    "navigationBarBackgroundColor": "#f5a11c",
    下拉刷新
    "enablePullDownRefresh": true
  },
  底部
  "tabBar": {
    "color": "#999",
    "selectedColor": "#e93b3d",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        底部图标
        "iconPath": "static/tabbar/home-default.png",
        点击后底部图标
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "static/tabbar/video-default.png",
        "selectedIconPath": "static/tabbar/video-active.png"
      },
      {
        "pagePath": "pages/index/demo",
        "text": "示例",
        "iconPath": "static/tabbar/face-default.png",
        "selectedIconPath": "static/tabbar/face-active.png"
      }
    ]
  }
}