初识小程序开发

一、小程序开发

1、小程序开发的不同点

• 运行环境不同：小程序是运行在微信环境中
• API不同：小程序无法调用DOM和DOM的API
• 开发环境不同：小程序开发需要开发账号和开发者工具

2、适配方案

• 适配单位：rpx
• 规定任何屏幕下的宽度为750px
• 自动根据屏幕宽度不同计算rpx的大小
• Iphone6下，1rpx = 1物理像素 = 0.5px

二、项目的基本结构

1、整体结构

• pages：用于存放所有的小程序页面
• utils：存放所有的工具模块
• app.js：整个项目的入口文件，App()必须在app.js中调用，且只能调用一次
• app.json：项目的全局配置文件
• app.wxss：项目的全局样式文件
• project.config.json：项目的配置文件
• sitemap.json：配置小程序及其页面是否允许被微信索引

2、小程序页面的组成部分

官方建议将所有的页面都存放在pages文件夹中，以单独的文件夹的形式存在

每个页面文件夹由四个文件组成：

• .js文件：页面的脚本文件，存放页面的数据，时间处理逻辑。Page({})
• .json文件：页面的配置文件，配置页面的外观和表现
• .wxml文件：页面的模板结构文件
• .wxss文件：页面的样式表文件

3、json配置文件

小程序中有四种配置文件，可以对小程序进行不同级别的设置

小程序项目中有四种不同的配置文件，分别是：

• 项目根目录中的app.json配置文件

  {
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
  }
  
  

• 项目根目录中的project.config.json配置文件

• 项目根目录中的sitemap.json配置文件

• 每个页面文件夹下的配置文件

三、wxml语法

1、数据绑定

初始化数据

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

使用数据

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

修改数据

1、this.setData({message:'修改后的数据', callback})

2、特点

• 同步修改
• 异步更新

// index.js
Page({
  data:{
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function(){
    // 不要直接修改this.text
    this.setData({
      text: 'change data'
    })
  }
})

2、事件绑定

事件分类

• 冒泡事件
• 非冒牌事件

绑定事件

• bind绑定：不会阻止冒泡事件向上冒泡
• catch绑定：事件绑定可以阻止事件冒泡

向事件对象传参

• 语法：data-key=value
• 获取：event.target.dataset.key||event.currentTarget.dataset.key

event.target是触发事件的对象，不一定是绑定事件的对象，例如事件委托/冒泡

currentTarget触发事件的对象一定是绑定事件的对象，没有事件委托

3、列表渲染

• 语法：wx:for='{{arr}}'
• wx:key='{{唯一值}}'

默认的个体：item，默认的下标：index，自定义个体名称：wx:for-item='myItem'，自定义下标名称：wx:for-index='myIndex'

4、条件渲染

• wx:if='条件'
• wx:elif='条件'
• wx:else

可以用于判断是否需要渲染某个代码块

wx:if和hidden:

hidden的用法：<view hidden='{{true}}'></view>

hidden是切换元素的显示与隐藏，但是始终加载了元素，wx:if则是判断元素是否进行了加载

5、模板的使用

定义模板

<template name="myTemplate">
  <view>
    <text>{{index}}:{{msg}}</text>
  </view>
</template>

引入模板

• <import src='路径'/>来引入模板结构
• @import '模板样式路径'来引入模板样式

使用模板，并且导入数据

<template is="myTemplate" data="{{...item}}"/>

// 定义模板中的数据
Page({
  data: {
    item: {
      index: 0,
      msg: 'hello'
    }
  }
})

6、生命周期

• onLoad()：页面加载时触发，一个页面调用一次，可获取页面对应路径的参数query
• onShow()：页面显示时触发，会执行多次
• onReady()：页面初次渲染时触发，只会调用一次，表示页面准备完成，可以与视图进行交互
• onHide()：页面隐藏时触发，例如tab栏的切换或者切换到后台
• onUpload()：页面卸载时触发，例如wx.redirectTo或者wx.navigateBack

四、小程序开发API

微信开放文档