微信小程序-云开发

注册小程序

安装开发工具

配置文件JSON

小程序根目录下app.json是全局配置文件

pages 页面路径列表

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

window 设置小程序的状态栏，导航栏，标题，窗口背景

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

  "tabBar": {
    "color":"#000",
    "selectedColor":"#E54847",
    "list": [{
      "pagePath": "pages/movie/movie",
      "text": "电影",
      "iconPath": "images/film.png",
      "selectedIconPath": "images/film-actived.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    }]
  }

页面配置json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#f99",
  "navigationBarTitleText": "我的",
  "navigationBarTextStyle": "white"
}

页面结构WXML

常用组件  view / img

指令语法

数据绑定

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

数组遍历

<view wx:for="{{arr}}" wx:key="{{index}}">{{index}}-{{item}}</view>

wx:if  wx:else

hidden

两者区别

频繁切换使用hidden

如果只显示一次使用wx:if

样式WXSS

页面交互JS