微信小程序从入门到精通

Posted 2021-07-18 老张在线敲代码

一、微信开发者初识

编辑器

一级工具

1. 项目—>退出当前项目

2. 格式化代码—>shift+alt+f

3. 工具—> 构建npm

4. 详情—>本地设置：【使用npm模块，不校验合法域名】

|
|

二、项目结构

项目结构

pages：视图组件(页面)

由四个文件组成一个页面

• js文件：写逻辑的

• json：当前页面的配置文件

• wxml：页面，标签，dom片段

• wxss：当前页面的样式

utils：全局工具

自定义的一些纯js工具，比如时间格式化插件等。

app.js：全局入口文件

等价于vue里的main.js，拥有自己的生命周期。

app.json：全局配置文件

配置项目的整体控制，比如说全局的样式，底部的导航等。

app.wxss：全局样式

微信对css的封装，有很多样式，比如选择器微信支持程度不高。

project.config.json：项目配置文件

该文件就是版本管理中的本地配置，用来配置项目的。

sitemap.json：爬虫名单

给微信平台里的爬虫看的，告诉微信平台项目里哪些内容是公开的，可以被别人搜到的。

|
|

三、全局配置

全局配置

app.json

entryPagePath:主页面

pages:页面路由

如果没有设置entryPagePath，那么现实的第一个页面取自于第一个路径。

window:窗口设置

tabBar:底部的tab导航

list是核心的设置，是一个数组，最多五个导航，最少两个；

list里的pagePath路径必须先在pages里定义，定以后才能使用；

|
|

四、页面配置

页面配置

pages/path/index.json

配置项

window

重写，覆盖全局的window配置，让当前页面拥有自己的窗口样式。

usingComponents

引入子组件的时候，用于挂载的；

相当于vue里的components；

|
|

五、小程序Api

小程序Api

App

全局入口，整个小程序项目中，只允许有一个App入口函数。

全局数据

• globalData:写在全局的js里

• 使用this.globalData.data

私有的生命周期【全局的生命周期】

• onLaunch:初始化函数

• onShow:启动或切换前台

• onHide:小程序后台运行

Page

私有的生命周期【页面的生命周期】

• onLoad:页面加载

• onShow:页面显示

• onHide:页面隐藏

• onReady:页面初始化渲染完成

• onUnload:页面卸载–销毁

Component

1. 构建自定义组件的，需要在json组件中声明："component":true之后才可以在page文件中使用。

2. 使用组件：在page页面的json里引入

    "usingComponents":{
        "wk-header":"/components/header/header"

    }

生命周期

• created:创建组件的生命周期

|
|

六、小程序语法

小程序语法

渲染数据

1. 在文档内使用插值的写法{{}}

2. 在标签上属性内使用也需要{{}}

3. 修改数据使用this.setData({data:newValue})

条件渲染

wx:if,‘wx:else if’,‘wx:else’

循环渲染

wx:for="{{data}}"

默认在for语法内注入了item变量和index变量；

如果需要修改名字，在元素上使用wx:for-item="别名".

事件绑定

bind:eventType='callback'

移动端没用click事件，对应的是tap事件

内置的网络请求

wx:request({})写法和jq.ajax几乎一样

|
|

七、引入第三方依赖

使用第三方依赖

wx-axios-promise

[文档参考]

如果直接引入模块同时还使用useExtendedLib引入了依赖，那么就会冲突，此时就需要构建npm了。

import axios from "wx-axios-promise";
const Axios = axios();
Axios.get("http://baidu.com").then((res) => {
    console.log(res);
});

用来执行请求的，并且不用再构建npm，直接使用es6的import就可以引入使用。

WeUI

• alert 弹窗在操作反馈里

• 因为是官方的，也算是内置的，所以不用安装。小程序自己的ui库，基于小程序基础组件封装的。

• 安装：在app.json文件里写入

 "useExtendedLib":{
    "weui":true
  }

• 使用：看官网，需要在 page.json 写入

 "usingComponents":{
    "mp-siwper":"weui/siwer"
  }

————————————————

原文链接：https://blog.csdn.net/WangLuke_/article/details/117931581