文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

小程序基础入门

时间：2021-09-06 23:54:14   收藏：0   阅读：37

目录

小程序基础入门

一、课程介绍

技术分享图片

二、本章任务

三、本章目标

四、知识点

1. 小程序介绍

小程序是什么？

小程序的发展史

微信小程序的优势和劣势

优势

不足

如何学习微信小程序

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. 项目的目录结构

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：

Node中的JS：

小程序中的JS：

小程序中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() 来获取程序实例。

小程序全局数据

我们在前面说到小程序的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对界面渲染完毕后触发

})

}

})

注意事项：

页面的用户行为：

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("执行了点击事件");

}

})

常见的事件类型

事件传参

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

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

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

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

handleTap(e){

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

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

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

}

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

这里需要注意的是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）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！