呆毛和二货
呆毛和二货

微信小程序入门与实例

第一章 什么是微信小程序

1. 小程序介绍

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验（微信小程序官方介绍）

2. 微信小程序和app的区别

(1)下载安装
微信小程序：通过微信(扫描二维码、搜索、分享)即可获得;
App：从应用商店(App Store、应用汇等)下载安装;
(2)内存占用
微信小程序：无需安装，和微信共用内存使用，占用内存空间忽略不计;
App：安装于手机内存，一直占用内存空间，太多的 App 可能会导致内存不足;
(3)手机适配
微信小程序：一次开发，多终端适配;
App：需适配各种主流手机，开发成本大;
(4)产品发布
微信小程序：提交到微信公众平台审核，云推送;
App：向十几个应用商店提交审核，且各应用商店所需资料不一样，非常繁琐;
(5)功能区别
微信小程序：限于微信平台提供的功能;
App：可实现完整功能 。

03、营销推广区别
(1)推广难度
微信小程序：通过二维码、微信搜索、朋友分享等方式直接获得
App：需要用户主动下载十几M的安装包，在没有Wi-Fi的情况下推广困难;
(2)消息推送
微信小程序：仅能回复模版消息，消息推送次数有限制;
App：可自行设置推送次数。
04、市场及应用场景区别
(1)面向用户群
微信小程序：面向所有微信用户，月活跃用户超8亿人，日使用账号5.7亿;
App：面向所有智能手机用户，约20亿台;
(2)创业机会
微信小程序：蓝海市场，在新的使用场景中可以寻求很多好机会;
App：市场基本饱和，几乎所有的领域均已覆盖;
(3)应用场景
微信小程序：
适合快速场景化服务，可以快速验证客户需求
适合初创团队，试错成本低，需要较少时间和资金投入，可以迅速占领空白领域客户渠道
App：
适合已验证可行的商业模式
适合产品复杂度高，功能受限低的产品开发
适合成熟的商业大公司，对自我品牌要求较高的企业
具备充裕的开发时间和资金储备

3. 小程序开发准备

  1. 申请账号
    · 在微信公众平台官网首页（mp.weixin.qq.com）注册。
    · 根据指引填写信息和提交相应的资料。
    · 选择注册的主体类型（个人/企业）
    企业类型与个人类型区别：
    ·目前个人类型申请的小程序不支持微信认证、微信支付、卡券应用、获取用户绑定的手机号码、附近小程序功能。
    ·获取用户信息，上传下载，音视频播放，获取定位，map地图，发布等其他基础功能都是可以用的。
  2. 小程序信息完善
    · 小程序名称、头像、介绍、服务类目等
    · 配置服务器域名（小程序可以跟指定的域名与进行网络通信，发起请求、上传下载等 ）
    · 登录小程序后台，可以在菜单 “设置”-“开发设置” 看到小程序的AppID
  3. 开发
    · 在小程序管理平台设置开发者权限
    · 安装小程序开发者工具
    · 编写小程序代码
  4. 发布小程序
    · 在小程序开发者工具菜单栏点击上传代码
    · 登录管理平台 - 开发管理 进行 提交审核 或者 选为体验版本
    · 选择提交审核
    项目发布需要：
    · 项目填写了AppID（注册后在小程序管理平台 - 设置 - 开发设置中获取，新建项目时就得填写）
    · 已经完善了小程序信息（名称、头像、介绍、服务类目等）

4. 小程序开发工具介绍

微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能,帮助开发者简单和高效地开发微信小程序。

[小程序开发工具介绍]（https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html）

第二章 微信小程序开发基础

1. 文件目录和每个文件的功能

官网-小程序目录结构

  • app全局文件
    app.js 小程序逻辑
    app.json 小程序公共配置
    app.wxss 小程序公共样式表
  • 小程序页面page
    pages文件夹中每一个文件夹代表一个页面，每个页面包含一个.js文件，一个.wxml文件，一个.wxss文件以及一个.json文件。
    js 页面逻辑
    wxml 页面结构
    json 页面配置
    wxss 页面样式表

  • wxml文件
    .wxml文件类似我们写的.html文件，但标签上有些不同。
    使用标签代替

    ，使用代替，使用标签代替，引入标签等等，后续做项目的时候会了解到更多标签。

  • wxss文件
    .wxss文件就是.css文件。在app.wxss中控制全局样式，在pages文件夹中的页面文件的.wxss文件中控制局部样式。局部样式的优先级大于全局样式。
    微信小程序为了适配多种不同屏幕大小的设备，采取了一种的响应式单位rpx，使用rpx单位就好像使用百分比作为单位一样实现响应式布局。rpx是一种相对大小，我们使用iphone6的机型时，1px=2rpx，iphone6的大小为375px667px，对于的rpx为750rpx1334rpx。
    官网-rpx

  • json文件
    .json文件是项目的配置文件。app.json文件进行全局配置，每个页面文件夹下还有一个.json文件用于局部配置，局部配置只能配置window属性。
    [官网-配置小程序]（https://developers.weixin.qq.com/miniprogram/dev/framework/config.html）

  • js文件
    小程序的生命周期分为应用声明周期和页面生命周期，应用声明周期函数在app.js中定义，且在小程序运行过程中一直存在内存中处于运行状态，在这里可以定义应用声明周期函数以及定义全局变量。每个页面中的.js文件中则可以定义页面声明周期函数等。

2. WXML语法

官网-wxml语法参考

3. 事件

小程序中不使用click事件，而用tab（触摸）事件代替，事件的前缀有两种分别是bind和catch，bind:tab表示冒泡事件，即事件触发后继续冒泡触发后续事件，catch:tab表示非冒泡事件，即事件触发后不再冒泡，类似执行了event.stopPropagation()方法。

//实现一个点击加一的计数器
//wxml

    {{count}}


//js
Component({
    //调用组件传来的变量
    properties:{
    },
    //内部变量
    data() {
        return {
            count:0
        }
    },
    //内部方法
    methods:{
        //点击加一
        addNumber() {
            this.setData({
               count:count+1 
            });
        }
    }
});

4. 小程序的生命周期

小程序的声明周期分为整个应用的声明周期以及单个页面的声明周期以及自定义组件的生命周期。生命周期不用马上弄明白，但是以后会有帮助。

应用生命周期回调函数

在app.js中，可以设置应用生命周期的回调函数。

App({
  onLaunch (options) {
    //初始化完成后执行
  },
  onShow (options) {
    //进入小程序后执行
  },
  onHide () {
    //离开小程序后执行，注意不是销毁，如切换其他App时，微信处于后台中，这时调用onHide
  },
  onError (msg) {
    //小程序出错时执行
  }
});
页面上生命周期回调函数
Page({
  onLoad: function(options) {
    //页面初始化后执行
  },
  onReady: function() {
    //初次渲染结束执行
  },
  onShow: function() {
    //进入页面执行
  },
  onHide: function() {
    //页面隐藏/切入后台时触发，如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等  
  },
  onUnload: function() {
    //页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
  },
  onPullDownRefresh: function() {
    // 监听下拉刷新事件,必须开启enablePullDownRefresh
  },
  onReachBottom: function() {
    // 监听用户上拉触底事件
  },
  onShareAppMessage: function () {
    // 点击转发按钮
  },
  onPageScroll: function() {
    // 页面滚动事件
  },
  onResize: function() {
    // 旋转屏幕触发
  }
})
组件生命周期函数

官网-组件生命周期

Component({
  lifetimes: {
    created:function() {
        //组件实例化的时候执行，此时不能调用setData()
    }
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});

第三章 小程序的模板和自定义组件

1. template模板

相对于component而言，template更加轻量级，它的功能有限，主要是用于展示。模板只有两个以.wxml 和.wxss结尾的文件

  1. 定义模板
    新建一个与pages同级的文件夹 => templates,在templates下创建templateItem文件夹，然后在这个文件夹里创建同名的.wxml和.wxss的文件
    使用name属性作为模板的名字，然后在