微信小程序学习笔记1.0

第1章 微信小程序基础

1.1 微信小程序介绍

1.1.1 什么是微信小程序

微信小程序的特点:

① 微信小程序是不需要下载和安装的;

② 它可以完成App应用软件的交互功能;

③ 用户扫一扫或者搜一下就可以使用小程序;

④ 微信小程序无处不在,随时随地可以使用;

⑤ 微信小程序无须卸载,应用方便。

1.1.2 微信小程序发展历程

① 2016年1月9日,微信团队首次提出“应用号”概念。

②2016年9月22日,微信公众平台对外发送小程序内测邀请,内测名额200个。

③2016年11月3日,微信小程序对外公测,开发完成后可以提交审核,但公测期间不能发布。④2016年12月28日,张小龙在微信公开课上解答外界对微信小程序的几大疑惑,包括没有应用商店、没有推送消息等内容。

⑤2016年12月30日,微信公众平台对外公告,上线的微信小程序最多可生成10000个带参数的二维码。

⑥2017年1月9日,微信小程序正式上线。

1.1.3 微信小程序提供的功能

1.支持分享当前界面功能,分享出去的是动态的界面

2.小程序线下扫码功能

3.小程序支持挂起状态

4.小程序的消息通知

5.小程序和公众号能相互跳转

6.小程序的搜索和历史列表

1.1.4 微信小程序不能提供的功能

① 小程序没有集中入口,没有应用商店。

② 小程序没有订阅关系。

③ 小程序不能推送消息。

④ 小程序不能做游戏。

1.1.5 微信小程序带来的机会

● 给企业带来机会:对于已有App软件的公司,提供了新的方式推广产品,而对于创业公司来说,使用微信小程序可以降低推广产品的成本。

● 给创业者带来机会:创业者可以围绕小程序做社区、做应用商店、做微信小程序开发平台、做教育培训及出版书籍等来进行创业。

● 给小程序员带来机会:给学生、网站编辑、前端开发人员等想做程序员的人们,提供了做小程序员的就业机会。

1.2 微信小程序开发工具的使用

(1)微信小程序开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

(2)公众平台申请开发者账号:

微信公众平台

(3)申请一个AppID:

访问微信公众平台,注册微信公众平台账号,选择小程序类型进行注册。注册成功后登录微信公众平台,开发者就可以在网站“设置”下的“开发设置”选项卡中查看到微信小程序的AppID,不可直接使用服务号或订阅号的AppID。

1.2.3 微信开发者工具的使用

1.编辑功能

微信开发者工具界面可以用于代码编辑、代码调试、项目预览与上传、编译、前后台切换、缓存数据清理及关闭项目。

在硬盘中打开文件的目录,可以新建4种文件:.js、.json、.wxml和.wxss文件,对文件进行重新命名、删除和查找操作。

.js文件编辑会帮助开发者补全所有的API,并给出相关的注释解释;.wxml文件编辑会帮助开发者直接写出相关的标签;.json文件编辑会帮助开发者补全相关的配置,并给出实时的提示。

注:只有保存文件,修改内容才会真实地写入硬盘中,并触发实时预览。

2.调试功能

小程序的调试工具有Console、Sources、Network、Storage、AppData、wxml。

  • Console窗口用来显示小程序的输出出错信息和调试代码
  • Sources窗口用于显示当前项目的脚本文件,在Sources窗口中开发者看到的文件是经过处理后的脚本文件
  • Network用来观察发送的请求和调用文件的信息
  • Storage窗口用于显示当前项目使用wx.setStorage 或wx.setStorageSync后的数据存储情况
  • AppData窗口用于显示当前项目、当前时刻具体数据,实时地反馈项目数据情况。用户可以在此处编辑数据,并及时地反馈到界面上
  • Wxml窗口用于帮助开发者开发wxml转换后的界面。在这里可以看到真实的页面结构及结构对应的wxss属性,同时可以修改对应wxss属性

3.项目功能

在项目模块中,可以看到微信小程序项目的相关信息,包括项目名称、AppID、项目文件的路径,如果有AppID的项目,可以在手机上预览微信小程序,将小程序上传

4.编辑功能

编辑:对整个项目进行重新编译

5.前台、后台功能

后台是指微信小程序从前台进入后台,例如在操作微信小程序过程中,突然打进来电话,如果接电话,这时小程序从前台进入后台;重新访问小程序,又会从后台进入前台

6.缓存功能

缓存用来清除数据存储、清除文件存储及清除用户授权数据

1.3 微信小程序框架文件

微信小程序框架文件分为三部分:框架全局配置文件、工具类文件和框架页面文件。

框架全局配置文件是从项目全局的角度对项目进行配置管理,工具类文件对应的是一些常用的.js工具处理,框架页面文件对应的是微信小程序各个页面。

1.3.1 框架全局配置文件

一个小程序框架配置文件由app.js、app.json和app.wxss 3个文件组成。它们作为全局文件,必须放在项目的根目录。

1.app.js小程序逻辑文件

定义全局数据和函数,可指定微信小程序的生命周期函数,不同阶段不同场景可使用不同的生命周期函数;还可以定义一些全局的函数和数据,其他页面引用app.js文件后就可以直接使用全局函数和数据。

微信小程序学习笔记1.0_第1张图片

2.app.json小程序公共设置

全局配置文件,可设置5个功能:配置页面路径、配置窗口表现、配置标签导航、配置网络超时和配置debug模式

微信小程序学习笔记1.0_第2张图片

① 配置页面路径,app.json定义一个数组存放多个页面的访问路径(页面访问的必要条件)

② 配置窗口表现,用于配置小程序的状态栏、导航条、标题、窗口背景色,可以设置导航条背景色(navigationBarBackgroundColor)、导航条文字(navigationBarTitleText)及导航条文字颜色(navigationBarTextStyle),还可以设置窗口是否支持下拉刷新(enablePullDownRefresh),默认值是不支持下拉刷新的,设置窗口的背景色(backgroundColor)、下拉背景字体或文本样式(backgroundTextStyle)

③ 配置标签导航

在app.json中配置tabBar属性。tabBar是一个对象,可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色,上边框颜色可以配置black、white两种颜色。标签导航存放到list数组中,有一个标签导航就在list中配置标签导航,list中的每个对象对应一个标签导航,每个对象中可以配置标签导航的路径、导航名称、默认图标及选中图标

微信小程序学习笔记1.0_第3张图片

④ 配置网络超时,可以配置网络请求、文件上传及文件下载时最长的请求时间,超过这个时间,不再允许请求

⑤ 配置debug模式,用于方便微信小程序开发者调试开发程序

3.app.wxss小程序公共样式文件

对CSS样式进行扩展,使用方式与CSS的一样,类选择器和行内样式的写法兼容大部分CSS样式。扩展了CSS样式,是针对所有页面定义的一个全局样式。

除了app.wxs提供的默认全局样式,用户还可以自行定义一些全局样式。

微信小程序学习笔记1.0_第4张图片

1.3.2 工具类文件

微信小程序框架目录中有一个utils文件夹,用来存放工具类的函数。定义完函数后,要通过module.exports将定义的函数名称进行注册,这样在其他的页面才可以使用。

微信小程序学习笔记1.0_第5张图片

1.3.3 框架页面文件

微信小程序的框架页面文件都是放置在pages文件夹下的,一个小程序框架页面文件由4个文件组成,分别是.js页面逻辑、.json页面配置、.wxml页面结构、.wxss页面样式表文件。每个页面都有一个独立的文件夹。

微信小程序学习笔记1.0_第6张图片

1.4 微信小程序逻辑层

小程序开发框架的逻辑层是用JavaScript编写的。逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈。编写过程中,在JavaScript的基础上做了一些扩展。逻辑层称为App Service。

1.4.1 APP()注册程序

函数App() 用来注册一个小程序。接收一个object 参数,其负责指定小程序的生命周期函数等。

相关的生命周期函数包括:

  • onLaunch监听小程序初始化
  • onShow监听小程序显示
  • onHide监听小程序隐藏
  • onError错误监听函数
    App({
      onLaunch: function() {
        // Do something initial when launch.
      },
      onShow: function() {
          // Do something when show.
      },
      onHide: function() {
          // Do something when hide.
      },
      onError: function(msg) {
        console.log(msg)
      },
      globalData: 'I am global data'
    })

注意:App() 必须在app..js 中注册,且不能注册多个;不要在定义于App() 内的函数中调用getApp(),使用this 就可以获取app实例;不要在运行onLaunch 时调用getCurrentPage(),此时page 还没有生成;通过getApp() 获取实例后,不要私自调用生命周期函数。

1.4.2 Page()注册页面

函数Page() 用来注册一个页面。接收一个object 参数,其负责指定页面的初始数据、生命周期函数和事件处理函数等。

相关的生命周期函数包括:

  • onLoad监听页面加载
  • onReady监听页面初次渲染完成状态
  • onShow监听页面显示
  • onHide监听页面隐藏
  • onUnload监听页面卸载
    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
      },
      onReady: function() {
        // Do something when page ready.
      },
      onShow: function() {
        // Do something when page show.
      },
      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.
      },
      // Event handler.
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        })
      },
      customData: {
        hi: 'MINA'
      }
    })

你可能感兴趣的:(微信小程序,微信小程序,学习,笔记)