首页 > 微信 > 详细

小程序基础入门

时间:2021-09-06 23:54:14      阅读:6      评论:0      收藏:0      [点我收藏+]

小程序基础入门

一、课程介绍

技术分享图片

二、本章任务

  • 了解小程序的概念以及优势和劣势

  • 掌握小程序的申请和创建流程

  • 掌握小程序的基本模板语法

  • 掌握小程序代码组成

  • 了解小程序的渲染模型

  • 掌握小程序事件的使用

三、本章目标

  • 了解小程序是什么,以及小程序的优势和劣势

  • 能够申请并且创建小程序

  • 能够独立完成小程序界面的搭建和开发

  • 实现Todo List的功能

四、知识点

1. 小程序介绍

小程序是什么?

  • 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

  • 任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和发布。

小程序的发展史

  • 早年,随着微信越来越流行,微信逐渐成为移动互联网中一个主要的入口,越来越多的人会通过微信来分享和浏览网站。

  • 微信基于WebView实现了前端界面的渲染,为了丰富微信中H5页面的功能,微信提供了JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情了。

  • JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。

    • 用户在访问网页的时候,在浏览器开始显示之前都会有一个的白屏过程,在移动端,受限于设备性能和网络速度,白屏会更加明显。

    • 除了白屏,影响 Web 体验的问题还有缺少操作的反馈,主要表现在两个方面:页面切换的生硬和点击的迟滞感。

  • 为了提高用户体验和使用的流畅度,微信研发设计并且推出了微信小程序。

微信小程序的优势和劣势

优势

  • 微信助理,容易推广。在微信中,小程序拥有众多入口,例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量,从而进行转化、变现。

  • 使用便捷。用户在使用小程序时,只需要轻轻点一下就可以使用,更加符合用户对使用方便、快捷的需求,所以小程序的用户数量不断增加。

  • 体验良好,有接近原生app的体验。在微信生态里,小程序在功能和体验上是可以秒杀掉 H5 页面的,H5 页面经常出现卡顿、延时、加载慢、权限不足等原因,而这些问题在小程序里都不会出现。

  • 成本更低,从开发成本到运营推广成本,小程序的花费仅为APP的十分之一,无论是对创业者还是传统商家来说都是一大优势。

不足

  • 单个包大小限制为2M,这导致无法开发大型的应用,采用分包最大是16M(这个值一直在变化,以官网为准)。

  • 需要像app一样审核上架,这点相对于H5的发布要麻烦一些。

  • 处处受微信限制。例如不能直接分享到朋友圈,涉及到积分,或者虚拟交易的时候,小程序也是不允许的。

如何学习微信小程序

  • 借助官方文档学习。 微信小程序有非常完善的官方文档,可以在官方文档上查到我们需要的所有东西。

https://developers.weixin.qq.com/miniprogram/dev/framework/

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a

  • 可以通过社区进行学习,社区提供了很多优质的资源,可以加快小程序的开发效率,提升小程序的开发体验。

https://github.com/justjavac/awesome-wechat-weapp

2. 小程序的申请和创建流程

账号的申请

开发小程序首先要进行小程序的账号申请。

https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

下载开发工具

这里大家可以从官方网站下载最新版的开发工具。因为这个开发工具一直在更新,所以建议大家直接从官网下载。

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

获取AppId

登录后台管理系统获取AppId。

技术分享图片

https://mp.weixin.qq.com/

创建项目

技术分享图片

技术分享图片

3. 项目的目录结构

  • pages:

    • wxml: 编写小程序界面结构的地方

    • wxss: 编写小程序样式的地方

    • json:编写界面配置的地方

    • js:编写界面逻辑的地方

  • utils: 编写工具类的地方

  • app.js:创建程序实例的位置

  • app.json: 编写全局配置地方

  • app.wxss: 编写全局样式的地方

  • project.config.json: 项目的配置文件

  • sitemap.json:配置哪些页面可以被检索到

4. 小程序常用配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

配置导航窗口

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

配置页面

一般情况下我们会给每个页面创建一个文件夹,所以我们首先在pages下创建一个文件夹。

小程序直接给我们提供了创建页面的功能,右键这个文件夹,点击创建新建Page即可直接生成页面所需的文件。

生成文件之后,所有的页面都需要在app.json的pages属性中声明之后,才可以访问,小程序会默认先加载pages属性中第一个页面。如果开发过程如果我们需要调试别的页面,我们可以添加一个新的编译模式。

技术分享图片

配置tabbar

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

在移动端经常会涉及到tabbar的使用,小程序直接给我们提供了配置tabbar的方法。

这里需要注意的是,tabbar的图标不能是线上的地址,需要提前准备好放到项目里,一般情况下,这些静态资源可以放在assets文件夹下。这些图标大家可以从阿里矢量图标库中进行下载https://www.iconfont.cn/

"tabBar": {

"list": [{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "assets/icons/index.png",

"selectedIconPath": "assets/icons/index-active.png"

},{

"pagePath": "pages/my/index",

"text": "我的",

"iconPath": "assets/icons/wode.png",

"selectedIconPath": "assets/icons/wode-active.png"

}]

},

总结

小程序中的配置还有很多,大家也不用全部记住,需要的时候在查就可以了,大家需要掌握的是如何查阅文档。

5. 小程序模板语法WXML

WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

标签的使用

在小程序中没有H5提供的那些标签了,这里我们需要使用小程序给我们提供的组件。小程序给我们提供的标签很多,这里我们就介绍几个常用的,剩下的大家可以结合文档使用。

view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。

text标签也是我们开发中常用的,这个相当于Html中的span

image标签相当于我们Html中的img。

...

剩下的大家可以结合官方文档使用

https://developers.weixin.qq.com/miniprogram/dev/component/

数据绑定

用户界面呈现会因为当前时刻数据不同而有所不同,或者是因为用户的操作发生动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力。

在 Web 开发中,开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中,使用 WXML 语言所提供的数据绑定功能,来完成此项功能。

数据定义

在界面对应的JS文件中的data属性上定义数据

   data: {
     msg:\"hello world\",
     num: 18,
   },

引用数据

通过{{}}的方式可以引用数据。

除了引用数据之外,这里还可以进行一些计算,最终显示的结果是计算之后得到的结果。

<view>{{msg}},{{num + 10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

逻辑渲染

WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

使用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
	<view> view1 </view>
	<view> view2 </view>
</block>

除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。

<view hidden="{{condition}}">

隐藏

</view>

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>

<!-- 对应的脚本文件
Page({
  data: {
      array: [{
      name: ‘天亮教育‘,
    }, {
      name: ‘尚云科技‘
    }]
  }
})
-->

使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">

{{idx}}: {{itemName.name}}

</view>

Key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容, <switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

  2. 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

这里大家可以先体会一下key的概念,等到我们介绍到数据变化的时候在演示key作用。

6. 小程序样式wxss

WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。

尺寸单位

在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。

在小程序中,规定所有手机的屏幕宽度都是750rpx,所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = (屏幕宽度/750)px

在iphone6手机下,屏幕宽度是375px,所以1rpx=0.5px。

样式的导入

在小程序中,样式引用是这样写:

@import ‘./test_0.wxss‘

由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。

小程序中的样式选择器

目前支持的选择器。

技术分享图片

小程序中会大量使用flex布局。多用一用flex布局。

7. 小程序中的JS

小程序中的js和浏览器中和node中的区别

浏览器中JS:

  • ES

  • DOM

  • BOM

Node中的JS:

  • ES

  • NPM

  • Native

小程序中的JS:

  • ES

  • 小程序框架

  • 小程序API

小程序中js的模块化

在小程序中实现JS模块化,和node中、ES6中是一致的,大家还可以使用之前的方式进行JS的模块化编程。

小程序中js的加载执行顺序

小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序。

案例:JS文件模块化

小程序中js的执行环境

小程序目前可以运行在三大平台:

  1. iOS平台,包括iOS9、iOS10、iOS11

  2. Android平台

  3. 小程序IDE

8. 小程序中的数据渲染

小程序和浏览器中有什么不同

浏览器中渲染是单线程的。

而在小程序中的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序中如何渲染

我们看看小程序是如何把脚本里边的数据渲染在界面上的。

WXML模板使用 view 标签,其子节点用 {{ }} 的语法绑定一个 msg 的变量。

<view>{{ msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 "Hello World"。

Page({

onLoad: function () {

this.setData({ msg: ‘Hello World‘ })

}

})

从这个例子我们可以看到3个点:

1.渲染层和数据相关。

2.逻辑层负责产生、处理数据。

3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

小程序中通讯模型

小程序的渲染层和逻辑层分别由2个线程管理:

渲染层的界面使用了WebView 进行渲染;

逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发。

技术分享图片

数据驱动的思想

在开发UI的过程中,程序需要维护很多变量状态,同时要操作对应的UI元素。随着页面越来越复杂,我们需要维护的变量越来越多,同时要处理的界面上的交互也越来越多,整个程序会变的越来越复杂。

通常情况下视图和变量的状态是相关联的,如果有某种方法可以让状态和视图绑定在一起,那就可以让我们省去修改视图的工作,这个方法就叫做数据驱动。

在有了框架之后,我们一般很少会采用直接去修改视图的方式,更新界面了,绝大多数情况,都会通过操作数据的方式,来更新视图。通过数据去驱动视图渲染。

9. 程序和界面

程序

"小程序"指的是产品层面的程序,而"程序"指的是代码层面的程序实例,为了避免误解,下文采用App来代替代码层面的"程序"概念。

App({

onLaunch: function(options) {},

onShow: function(options) {},

onHide: function() {},

onError: function(msg) {},

globalData: ‘I am global data‘

})

宿主环境提供了 App() 构造器用来注册一个程序App,需要留意的是App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

  • onLaunch: 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

  • onShow:当小程序启动,或从后台进入前台显示,会触发 onShow

  • onHide:当小程序从前台进入后台,会触发 onHide

  • onError:当小程序发生脚本错误,或者 API 调用失败时,会触发 onError 并带上错误信息。

  • 其他字段:可以添加任意的函数或数据到 Object 参数中,在App实例回调用 this 可以访问。

小程序全局数据

我们在前面说到小程序的JS脚本是运行在JsCore的线程里,小程序的每个页面各自有一个WebView线程进行渲染,所以小程序切换页面时,小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中。

在上文中说道App实例是单例的,因此不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。

在其他JS中可以通过getApp()获取App实例,之后可以获取到定义在App实例上的数据。

Page

一个小程序可以有很多页面,每个页面承载不同的功能,页面之间可以互相跳转。

页面构造器

Page({

data: { text: "This is page data." },

onLoad: function(options) { },

onReady: function() { },

onShow: function() { },

onHide: function() { },

onUnload: function() { },

onPullDownRefresh: function() { },

onReachBottom: function() { },

onShareAppMessage: function () { },

onPageScroll: function() { }

})

生命周期

onLoad:生命周期函数--监听页面加载,触发时机早于onShow和onReady

onReady:生命周期函数--监听页面初次渲染完成

onShow:生命周期函数--监听页面显示,触发事件早于onReady

onHide:生命周期函数--监听页面隐藏

onUnload:生命周期函数--监听页面卸载

数据

WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段,这里所说的数据其实就是来自于页面Page构造器的data字段,data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。

在JS脚本中如果需要获取到data上的数据,需要通过this.data获取。

<!-- page.wxml -->

<view>{{text}}</view>

// page.js

Page({

data: {

text: ‘天亮教育‘,

},

onLoad(){

console.log(this.data.text)

}

})

如果涉及到更新,这里可以调用Page实例提供的setData把数据传递给渲染层,从而达到更新界面的目的。由于小程序的渲染层和逻辑层分别在两个线程中运行,所以setData传递数据实际是一个异步的过程,所以setData的第二个参数是一个callback回调,在这次setData对界面渲染完毕后触发。

setData其一般调用格式是 setData(data, callback),其中data是由多个key: value构成的Object对象。

// page.js

Page({

onLoad: function(){

this.setData({

text: ‘change data‘

}, function(){

// 在这次setData对界面渲染完毕后触发

})

}

})

注意事项:

  • 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。

  • 由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB。

  • 不要把data中的任意一项的value设为undefined,否则可能会有引起一些不可预料的bug。

页面的用户行为:

onPullDownRefresh 下拉刷新

监听用户下拉刷新事件,需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom 上拉触底

监听用户上拉触底事件。可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance。在触发距离内滑动期间,本事件只会被触发一次。

onPageScroll 页面滚动

监听用户滑动页面事件,参数为 Object,包含 scrollTop 字段,表示页面在垂直方向已滚动的距离(单位px)。

onShareAppMessage 用户转发

只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容,如代码清单3-13所示。

// page.js

Page({

onShareAppMessage: function () {

return {

title: ‘自定义转发标题‘,

// 自定义点击链接需要跳转的页面,默认当前页面

path: ‘/page/user?id=123‘

}

}

})

10. 事件

事件定义

在小程序中绑定事件可以以bind开头然后跟上事件的类型,如bindtap绑定一个点击事件,对应的值是一个字符串,需要在page构造器中定义同名函数,每次触发事件之后就会执行对应函数的内容。

<view bindtap="handleTap">点击事件</view>

<view bind:tap="handleTap">另一种写法</view>

// pages/my/index.js

Page({

handleTap(){

console.log("执行了点击事件");

}

})

常见的事件类型

  • touchstart 手指触摸动作开始

  • touchmove 手指触摸后移动

  • touchcancel 手指触摸动作被打断,如来电提醒,弹窗

  • touchend 手指触摸动作结束

  • tap 手指触摸后马上离开

  • longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

  • longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

  • transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发

  • animationstart 会在一个 WXSS animation 动画开始时触发

  • animationiteration 会在一个 WXSS animation 一次迭代结束时触发

  • animationend 会在一个 WXSS animation 动画完成时触发

事件传参

在小程序中进行事件传参不能像传统的Web项目中一样,在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

<!-- data-参数名=‘参数值‘ -->

<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

每个事件回调触发时,都会收到一个事件对象,通过这个对象可以获取路由传递的参数。

handleTap(e){

console.log("执行了点击事件");

// 通过currentTarget中的dataset属性可以获取时间参数

console.log(e.currentTarget.dataset.msg);

}

关于这个事件对象其他属性

  • type 事件类型

  • timeStamp 页面打开到触发事件所经过的毫秒数

  • target 触发事件的组件的一些属性值集合

  • currentTarget 当前组件的一些属性值集合

  • detail 额外的信息

  • touches 触摸事件,当前停留在屏幕中的触摸点信息的数组

  • changedTouches 触摸事件,当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别,currentTarget为当前事件所绑定的组件,而target则是触发该事件的源头组件。

阻止事件冒泡

在小程序中除了通过bind之外,还可以通过catch进行事件绑定,通过catch绑定的事件不会触发事件冒泡。

事件捕获

事件的触发分为两个阶段,首先是捕获阶段,其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发,可以通过capture-bind进行事件绑定。

五、总结

见微信小程序第一天总结

六、作业

1. 课堂案例。

2. 用小程序实现一个todo-list功能。

3. 在todo-list上面加一个跑马灯的广告轮播。

4.todo-list已完成的内容变个颜色。

小程序基础入门

原文:https://www.cnblogs.com/xingkongcanghai/p/15233297.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!