小程序是什么

简介

小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

暂时无法在飞书文档外展示此内容

2017年1月9日，张小龙在2017微信公开课Pro上发布微信小程序正式上线。

企业开发小程序的意义

一、提升知名度和曝光率

对于企业和商家而言，若拥有小程序，就可以将企业介绍、产品介绍等内容放到小程序上，然后借助附近的小程序等功能，将自己的小程序推广出去。由于小程序是基于微信运行的，而微信目前又拥有10亿活跃用户。所以，利用小程序做推广，往往能够迅速提升企业的知名度和曝光率。

二、实现用户裂变

对于商家、服务商而言，若拥有小程序，就可以借助小程序的易用，易传播性，用户使用小程序后，可以触发用户的转发、分享行为。而用户与用户之间的转发、分享，往往能够实现口碑传播，这样一来商家和企业往往能够裂变出一批新客户。

三、提高复购率

对于企业和商家而言，若拥有小程序，就可以在网站、产品包装、名片等地方印上小程序码。用户通过扫码，就可以直接进入小程序，并方便快捷使用小程序服务。然后企业可以通过各种各样的方式引导用户注册成为会员，在用户注册成为会员之后，可以定期向会员推送一些各种各样的优惠活动，这样一来往往能够有效激发会员再次消费的欲望，从而提升复购率。

开发小程序准备工作

小程序开发可以是个人，也可以是企业账号，二者可以使用的功能有差异。

申请小程序

登录地址： mp.weixin.qq.com/ 在“管理”菜单下，选择“小程序”，点击“立即申请”

设置开发者

登录微信公众平台，在开发 > 成员管理 > 项目成员中添加开发者

下载开发工具

在微信开发者文档微信开发者工具中下载对应操作系统的微信开发工具

登录开发者工具

打开微信开发者工具，用设置过开发者权限的微信号扫码登录微信开发者工具

小程序开发者文档

文档地址：developers.weixin.qq.com/miniprogram…

小程序开发需要的所有知识都可以在文档中找到，还有配套的微信小程序开发者社区

小程序开发工具介绍

正式开发小程序

2.1 创建小程序

启动微信开发者工具，使用模版创建，或者导入已有的小程序项目目录

项目需要填写AppID, 获取方式：登录微信公众平台在开发 > 开发管理 > 开发设置 > 开发者ID

2.2 小程序的项目结构

2.2.1 项目总目录

pages 用来存放所有小程序的页面；
utils 用来存放工具性质的模块（比如：格式化时间的自定义模块）；
app.js 小程序项目的入口文件；
app.json 小程序项目的全局配置文件；
app.wxss 小程序项目的全局样式文件；
project.config.json 项目的配置文件；
sitemap.json 用来配置小程序及其页面是否允许被微信索引；

2.2.2 项目的4种json配置文件：

(1) 项目根目录中的app.json配置文件；

app.json是小程序的全局配置，包含了小程序的所有页面路径、窗口外观、界面表现、底部tab等

(2) 项目根目录中的project.config.json配置文件；

project.config.json是项目配置文件，用来记录对小程序开发工具所作的个性化配置

setting中保存了编译相关的配置；
projectname中保存的是项目名称；
appid中保存的是小程序的账号ID

(3) 项目根目录中的sitemap.json配置文件；

sitemap.json文件用来配置小程序页面是否运行微信索引。当开发者运行微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。

(4) 每个页面文件夹中的inex.json配置文件

小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。

2.2.3 page目录

page目录中，页面通常都以单独的文件夹存在：
.js文件（页面的脚本文件，存放页面的数据、事件处理函数等）
.json文件（当前页面的配置文件，配置窗口的外观、表现等）
.wxml文件（页面的模板结构文件）
.wsss文件（当前页面的样式表文件）

2.2.4 WXML模板

WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

WXML和HTML的区别：
1）标签名不同；HTML（div，span，img，a）WXML（view，text，image，navigator）
2）属性节点不同；<a href = "#">超链接</a><navigator url="/pages/home/home"></navigator>
3）提供了类似Vue中的模板语法数据绑定；列表渲染；条件渲染

2.2.5 WXSS样式

WXSS是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。

WXSS和CSS的区别：
1）新增rpx尺寸单位CSS中需要手动进行像素单位换算，如rem WXSS在底层支持新的尺寸单位rpx，
   在不同大小的屏幕上小程序会自动进行换算
2)提供了全局的样式和局部样式项目根目录中的app.wxss会作用于所有小程序页面局部页面的.
   wxss样式仅对当前页面生效
3）WXSS仅支持部分CSS选择器.class和#idelement并集选择器、后代选择器::after和::before等伪类选择器

2.2.6 JS逻辑交互

通过.js文件来处理用户的操作。如：响应用户的点击、获取用户的位置等。

JS文件分为三大类：
1）app.js是整个小程序项目的入口文件，通过调用APP（）函数来启动整个小程序
2)页面的.js文件是页面的入口文件，通过调用Page（）函数来创建并运行页面
3）普通的.js文件是普通的功能模块文件，用来封装公共的函数或属性供页面使用

2.3 小程序框架组件

2.3.1 小程序框架

App(Object object)

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App({
  onLaunch (options) {
    // Do something initial when launch.
  },onShow (options) {
    // Do something when show.
  },onHide () {
    // Do something when hide.
  },onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch

小程序初始化完成时触发，全局只触发一次。

onShow()

小程序启动，或从后台进入前台显示时触发。

onHide()

小程序从前台进入后台时触发。

onError()

小程序发生脚本错误或 API 调用报错时触发。

onPageNotFound()

小程序要打开的页面不存在时触发。

onUnhandledRejection()

小程序有未处理的 Promise 拒绝时触发。

onThemeChange(Object object)

系统切换主题时触发。

Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
  // Do some initialize when page load.
  },
  onShow: function() {
  // Do something when page show.
  },
  onReady: function() {
  // Do something when page ready.
  },
  onHide: function() {
  // Do something when page hide.
  },
  onUnload: function() {
  // Do something when page close.
  },
  onPullDownRefresh: function() {
  // Do something when pull down.
  },
  onReachBottom: function() {
  // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
  // return custom share data when user share.
  },
  onPageScroll: function() {
  // Do something when page scroll
  },
  onResize: function() {
  // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, 
    function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

生命周期函数

onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行

onHide()

页面隐藏/切入后台时触发。如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()

页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

onRouteDone()

路由动画完成时触发。如 wx.navigateTo 页面完全推入后或 wx.navigateBack 页面完全恢复时。

Component(Object object)

创建自定义组件，接受一个 Object 类型的参数。

Component({
  behaviors: [],
  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) { } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有数据，可用于模版渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test'
      })
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {

    }
  }

})

Behavior(Object object)

注册一个 behavior，接受一个 Object 类型的参数。

module.exports = Behavior({
    behaviors: [],
    properties: {
      myBehaviorProperty: {
        type: String
      }
    },
    data: {
      myBehaviorData: {}
    },
    attached: function(){},
    methods: {
      myBehaviorMethod: function(){}
    }
  })

2.3.2 小程序组件

常用视图容器组件

1）view 普通视图区域类似于HTML中的div，是一个块级元素常用来实现页面的布局效果 2）scroll-view 可滚动的视图区域常用来实现滚动列表效果 3）swiper和swiper-item 轮播图容器组件和轮播图item组件

基础内容组件

1）text 文本组件类似于HTML中的span标签，是一个行内元素 2）rich-text 富文本组件支持把HTML字符串渲染为WXML结构

其他常用组件

1）button 按钮组件功能比HTML中的button按钮丰富通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户权限、获取用户信息等） 2）image 图片组件 image组件默认宽度约300px、高度240px 3）naviagtor 页面导航组件类似于HTML中的a链接

原生组件

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

camera 系统相机。扫码二维码功能
canvas 画布
input 单行输入框（仅在focus时表现为原生组件）
live-player 实时音视频播放
live-pusher 实时音视频录制
map 地图
textarea 多行输入框
video 视频播放

2.3.3 小程序API

小程序中的API是由宿主环境提供的，开发者可以调用微信提供的能力，如：获取用户信息、本地存储、支付功能等，更多 API 详细参考微信开发者文档

小程序官方把API分为3大类：事件监听API 特点：以on开头，用来监听某些事件的触发如：wx.onWindowResize(function callback)监听窗口尺寸变化的事件同步API 特点1：以Sync结尾的API都是同步API 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常如：wx.setStorageSync('key','value')向本地存储中写入内容异步API 特点：类似于jQuery中的$.ajax(option)函数，需要通过success、fail、complete接收调用的结果如:wx.request()发起网络数据请求，通过success回调函数接收数据

小程序的发布上线

提交代码审核：在微信开发者工具中，完成调试和测试后，上传小程序代码，在微信公众平台的版本管理提交小程序代码进行审核，请确保代码符合微信小程序的开发规范和要求。

等待审核结果：审核通常需要3-7个工作日。在此期间，请耐心等待。如审核未通过，可查看审核结果中的原因，进行修改后重新提交。

发布小程序：审核通过后，您可以在微信公众平台的“小程序管理”页面，点击“发布”按钮，正式上线小程序。

关联公众号：在小程序发布后，您可以将其关联到公众号。关联成功后，用户可以在公众号菜单中直接访问小程序。

小程序初识指南