从零开始学微信小程序

雨点打透心脏的1/2处 2022-03-15 04:24 253阅读 0赞

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是数组当前项的具体内容