微信小程序开发基础

小程序基础

小程序框架

框架全局配置文件、工具类文件和框架页面文件

框架全局配置文件：

由根目录下的app.js app.json app.wxss组成
app.js定义全局数据和函数使用，格式为：

  App({
    onLaunch: function () {    //生命周期函数。此为小程序初始化函数
  if (!wx.cloud) {
    console.error('请使用 2.2.3 或以上的基础库以使用云能力')
  } else {
    wx.cloud.init({
      traceUser: true,
    })
  }

  this.globalData = {}
},
getUserInfo:function(){    //自定义的全局函数
    //do things
},
globalData:{        //定义全局变量
  userInfo:"xxx",
  other:null
}
})

app.json全局配置文件可以设置5个功能：配置页面路径，配置窗口表现，配置标签导航，配置网络超时和配置debug模式：

    {
  "pages": [    //配置页面路径，配置好之后会直接生产对应的文件和文件夹
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib"
  ],
  "window": {    //配置窗口表现
    "backgroundColor": "#F6F6F6",    //窗口背景色
    "backgroundTextStyle": "light",    //下拉背景字体或文本样式
    "navigationBarBackgroundColor": "#F6F6F6",    //导航背景色
    "navigationBarTitleText": "云开发 QuickStart",    //导航条文字
    "navigationBarTextStyle": "black"    //导航条文字颜色
  },
  "tabBar":{    //配置标签导航
  "selectColor":"#FFFFFF",   //标签导航选中时文字颜色
  "backgroundColor":"#F5F5F5",        //标签导航背景色
  "borderStyle":"white",        //标签导航上边框颜色
    "list":[{
      "pagePath":"pages/index/index",    //页面跳转路径
      "text":"首页" ,     //标签导航名称
      "iconPath":"" ,//默认时图标
      "selectedIconPath":""    //选中时图标
    },{
      "pagePath":"pages/logs/logs",
      "text":"日志"
    }]
  },
  "networkTimeout":{    //配置网络超时
    "request":10000,
    "downloadFile":10000
  },
  "debug":true    //配置debug模式
}

app.wxss 小程序公共样式文件，对css样式进行了扩展，兼容大部分css样式，页面的样式优先级高于全局样式
工具类文件：utils文件夹用于存放工具类的函数。定义完函数之后要通过
module.exports将定义的函数名称进行注册，这样在其他页面才能使用。

    module.expors={
        myfunctionName: functionNameInUtils
    }

App()：注册程序函数

生命周期函数：

   onLaunch()    // 监听小程序初始化
    onShow()       //监听小程序显示
    onHide()        //监听小程序隐藏
    onError()        //错误监听

注意：不要再定义于App()内的函数中调用getApp()，使用this就可以获取app实例，不要私自调用生命周期函数

Page()：注册页面函数

生命周期函数：

    onload()        //监听页面加载
    onReady()        //监听页面初次渲染完成状态
    onShow()        //监听页面显示
    onHide()        //监听也页面隐藏
    onUnload()        //监听页面卸载

视图层：

js中Page下的data数据可以在页面中使用{{name}} 直接显示
{{}}中可以进行简单运算：三元，数学，逻辑，字符串运算，数据路径运算
条件渲染：

wx:if 判断单个组件

<view wx:if="{{bool}}">1</view>    //判断是否需要渲染代码块
<view wx:elif="{{bool}}">2</view>    //else if
<view wx:else="{{bool}}">3</view>    //else

wx:if 判断多个组件
使用 标签包裹需要判断的组件 在block中判断

列表渲染：

wx:for 列表渲染单个组件

<view wx:for="{{array}}">    //默认数组当前项下标为index 当前项变量名为item
    {{index}}: {{item.message}}
</view>
//但是可以使用wx:for-index="myIndex"指定index，wx:for-item="MyItem" 指定item

block wx:for 列表渲染多个组件

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

wx:key 指定唯一标识符：列表会动态改变，并且希望列表中的项目保持自己的特征和状态。数组中wx:key指定字段对应的值唯一且不能动态改变。
模板 代码块的复用
使用is属性来指定模板，data属性来传入数据，is可以使用三元运算符动态觉得渲染哪个模板

引用

import 引用：引用另一个wxml里的模板组件
include 引用：导入另一个wxml里除了模板的其他组件(和jsp里的include动作很像)