微信小程序篇

目录

• 开发工具
• 我的第一个微信小程序
  : 安装微信小程序开发者工具
  : 选择小程序项目
  : 新建完成
• 微信开发介绍
  : 工具介绍
  : 小程序结构目录
  : 配置介绍
• 视图层
  : 数据绑定普通写法
  : 运算
  : wx:for
  : 样式导入

开发工具

严格来说，微信小程序支持所有的开发工具，但是从效率和便利性来说，推荐如下

微信小程序开发工具 下载地址

我的第一个微信小程序

下面开始演示如何创建我的第一个微信小程序

安装微信小程序开发者工具：

下载好微信小程序开发者工具后，直接双击安装，一直点击下一步即可。 安装好后，界面如下

选择小程序项目：

下载好微信小程序开发者工具后，直接双击安装，一直点击下一步即可。 安装好后，界面如下

新建完成：

微信开发介绍

工具介绍：

小程序结构目录：

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

配置介绍：

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含义

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
3. 完整的配置信息请参考 app.json配置

自动生成文件


视图窗口
window配置官方文档

tabBar样式
官方文档
动态设置 tabBar 的整体样式文档

page.json

视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件、 事件系统，可以构建出页面的结构。

数据绑定普通写法：

 <view> {{ message }} </view>

    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

运算：

wx:for：

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

样式导入：

 

内联样式：

样式导入：