从零开始学微信小程序开发：1

最新推荐文章于 2024-09-13 09:48:09 发布

CopperDong

最新推荐文章于 2024-09-13 09:48:09 发布

阅读量1.4w

点赞数 14

分类专栏：前端

本文链接：https://blog.csdn.net/QFire/article/details/78986623

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

1.1、安装

1.2、创建项目

登录开发工具：

添加项目：有本地小程序项目和公众号网页开发

无AppID的开发者也可以使用开发工具

主要文件：如果创建时选中“quick start项目”，一共有2个目录和3个文件，最关键也是必不可少的，是app.js, app.json和app.wxss

.js是脚本文件，.json是配置文件，wxss是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

1.3 认识开发工具

模拟器：

调试工具：

Console：显示错误信息，可用console.log('onLoad')调试

Sources面板：显示当前项目的脚本文件，与浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以Sources中的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。

Network面板：用于观察和显示网络请求request和socket的情况。

AppData面板：用于显示当前项目中的具体数据，实时地反馈项目数据情况。变量

Storage面板：显示当前项目使用本地存储的情况

Wxml面板：帮助开发者查看Wxml转化后的界面。

代码编辑：

1.4 查看小程序效果

“清除数据缓存”，再重启

第二章微信小程序架构分析

2.1 微信小程序框架结构

小程序只是前端程序（提供前端的逻辑层、视图层），通常还需要有数据层、业务逻辑层、服务层、控制层等这些通常说的后端程序

utils目录的util.js是一个共用js库，包含一个日期格式转换的函数。一般只保存一些静态图片，音视频放在后端

2.2 配置文件详解

app.json：对当前项目进行全局配置，包括每个页面文件的路径、窗口表现、设置网络超时时间、多tab等

要用到的页面都必须在app.json中进行配置，添加到pages数组中，文件名不需要写后缀，框架会自动寻找.json, .js, .wxml, wxss文件进行编译组合，第一项表示初始页面

配置窗口状态：

backgroundColor：窗口的背景色，使用十六进制的RGB

backgroundTextStyle：下拉背景字体、loading图的样式，目前只支持设置为"dark" or "light

enablePullDownRefresh：是否开启下拉刷新

navigationBarBackgroundColor：导航栏背景颜色

navigatonBarTextStyle：导航标题颜色，目前只支持black and white

navigationBarTitleText：导航栏标题文字内容

配置窗口底部tabBar：P42

在app.json中添加tabBar的5个属性

debug模式：

"debug": true

页面配置文件：不同页面有时需要不同配置，只能设置window属性，无须写window这个键

2.3 逻辑层js文件

对后端接收到的数据进行加工处理。官方在JavaScript的基础上进行了一些封装和修改：

提供了App和Page方法，用来进行程序和页面的注册
提供丰富的API，如扫一扫、支付
每个页面有独立的作用域，并提供模块化能力
JavaScript在Web中的一些能力无法使用，如不能访问document和window等对象
所有代码最终被打包成一份JavaScript，并在小程序启动的时候运行，直到销毁。类似ServiceWorker

注册小程序：每个小程序必须在app.js中进行注册且只能注册一次，用App()函数，参数为json对象，可定义以下3个生命周期

onLaunch：初始化完成时触发
onShow：启动，或从后台进入前台
onHide：从前台进入后台

进入后台一定时间，或手机资源占用过高，就会被销毁

注册页面：每个页面也必须使用Page()函数注册。使用到的数据在data属性中定义

初始化数据：位于data中，第一词渲染，data将会以JSON的形式有逻辑层传至视图层。视图层通过wxml对数据进行绑定。

生命周期函数： P48

onLoad：页面加载完调用，只调用一次。参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
onShow：页面显示时，每次打开页面都会调用一次
onReady：初始渲染完成是，代表页面已经准备妥当，可以和视图层进行交互
onHide：页面隐藏（当navigateTo或底部tab切换时）
onUnload：页面卸载（当redirectTo或navigateBack的）
onPullDownRefresh：下拉刷新时。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

事件处理函数：Page中可以定义一些特殊的函数。在视图层的组件中加入事件绑定。

使用setData修改初始化数据：

2.4 页面描述文件wxml

组件（Component）是视图的基本组成单元。

数据绑定：<text class="user-motto"> {{motto}} </text>用双括号

条件渲染：根据绑定表达式的逻辑值来判断是否渲染当前组件

或者使用wx:if <view wx:if="{{cond}}"> T </view>

当需要控制多个组件时

</block>

列表渲染：循环渲染的控制属性

使用wx:for

<view wx:for="{{items}}"> # items是一个数组

{{index}}: {{item.message}} # index是下标，item是数组当前项的具体内容

</view>

使用模板：组件的组合要多次使用

<view>name: {{item.name}} </view> # item是传入的对象

</view>

</template>

引用其他页眉文件：可以将一些模板代码定义在一个文件

<import src="template.wxml"/> 只是import模板，不会import引用文中的import

<include src="header.wxml"/> 相当于拷贝代码

2.5 页眉的事件

两大类型：

冒泡事件：触发后，向父节点传递

非冒泡事件：不向父节点传递

冒泡事件有：

touchstart：手指触摸
touchmove：手指触摸后移动
touchcanncel：手指触摸动作被打断，如来电提醒，、弹窗
touchend：动作结束
tap：触摸后离开
longtap：触摸后，超过350ms再离开

其它组件自定义事件都是非冒泡事件

事件绑定：定义属性，并设置值即可。属性是以bind或catch开头，再加上事件类型字符串。如bindtap

catch可以阻止冒泡事件向上冒泡

事件对象：一个名为event的参数。有6个属性：

type属性：用来表示当前事件的类型

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

target属性：触发事件的源组件，是一个对象

currentTarget属性：当前组件

touches属性：一个数组，用来保存触摸点信息

detail属性：一个对象，用来保存特殊事件所携带的数据，如表单的提交事件、错误事件等

2.6 页面样式文件wxss

wxss具有CSS的大部分特性，如选择器支持id选择器、类选择器、伪类选择器等。同样，也支持class和style方式设置组件的样式。

尺寸单位：像素px、厘米cm、毫米mm、英寸in等。在小程序中另外又扩展了2种尺寸单位

rpx：可以根据屏幕宽度进行自适应

rem：规定屏幕宽度为20rem;1 rem = (750 / 20)rpx

样式导入： @import "common.wxss"；