1、初始小程序

1.1、什么是小程序

依托与微信，完整的一个应用，即用即走、触手可及。

1.2、小程序注册

微信公众平台注册：https://mp.weixin.qq.com/

1.3、安装微信开发者工具

微信小程序官方文档：https://developers.weixin.qq.com/doc/

2、小程序开发基础入门

2.1、JSON 配置

2.1.1、全局配置

（1）app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，文件内容为一个 JSON 对象。

常用配置项：

• entryPagePath
• window
• pages
• tabBar

（2）project.config.json 配置文件

（3）sitemap.json 配置文件

2.1.2、页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。

2.2、WXML 文件

2.2.1、数据绑定

在当前页面的 .js 文件中声明相关属性，例如：

//index.js文件
Page({
    data: {
        msg: 'hello',
    },
});

在 index.wxml 文件中使用：

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

2.2.2、条件渲染

在当前页面的 .js 文件中声明相关属性，例如：

//index.js文件
Page({
    data: {
        isShow: false,
    },
});

在 index.wxml 文件中使用：

<view wx:if="{{isShow}}">hello</view>

2.2.3、列表渲染

在当前页面的 .js 文件中声明相关属性，例如：

//index.js文件
Page({
    data: {
        list: ['a', 'b', 'c'],
    },
});

在 index.wxml 文件中使用：

<view wx:for="{{list}}" wx:key="index">{{index}},{{item}}</view>

2.2.4、模板与引用

在 .wxml 文件中声明模板：

<template name="msgItem">
    <view>
        <text> msg: {{msg}} </text>
    </view>
</template>

在当前 .wxml 文件中使用：

<template is="msgItem" data="{{...item}}" />

其中，item 是在 .js 文件中声明的变量，例如：

//page.js
Page({
    data: {
        item: {
            msg: 'hello',
        },
    },
});

在外部页面如何想要使用当前页面的 template 模板，需要使用 import 或 include 引入，import只能引入当前指向文件中的模板，include 除了可以引入模板之外，还可以引入目标文件的其他元素。

import 使用：

<import src="../index/index.wxml" />
<template is="msgItem" data="{{msg: 'forbar'}}" />

include 使用：

<include src="../index/index.wxml" />

2.2.5、WXS 语法

在 .wxml 文中编写脚本，例如：

<wxs module="abc"> var msg = 'hello abc' module.exports = { msg: msg } </wxs>

<view>{{abc.msg}}</view>

需要了解 WXS 的语法：

• 可以使用哪些数据类型；
• 可以声明哪些语句；
• 如何使用运算符；
• 声明变量只能使用 var；
• 模块化编程；

2.2.6、事件处理

点击使用使用 bind:tap 或 bindtap ，例如：

index.wxml 文件：

<view bindtap="onclick" data-id="1">点击</view>

在 index.js 文件中声明点击事件函数，例如：

Page({
    data: {},
    onclick(event) {
        console.log(event.currentTarget.dataset.id);
    },
});

使用 bindtap 事件会冒泡，可以使用 catchtap 阻止冒泡，例如：

<view catchtap="onclick">点击</view>

2.3、WXSS 文件

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。

对 CSS 的扩展：

• 单位尺寸使用 rpx
• 使用 import 引入其他样式文件

3、小程序开发进阶

3.1、生命周期

应用生命周期

在 app.js 文件中调用 App()，该函数的参数是一个 Object 类型，在参数对象中定义生命函数：

• onLaunch，监听小程序初始化
• onShow，监听小程序启动或切前台
• onHide，监听小程序切后台
• onError，错误监听函数
• onPageNotFound，页面不存在监听函数

页面生命周期

在页面的 .js 文件中调用 Page()，该函数的参数是一个对象类型，对象的生命周期函数属性：

• onLoad，监听页面加载
• onShow，监听页面显示
• onReady，监听页面初次渲染完成
• onHide，监听页面隐藏
• onUnload，监听页面卸载
• onPullDownRefresh，监听用户下拉动作
• onReachBottom，页面上拉触底事件的处理函数
• onShareAppMessage，转发给微信朋友
• onShareTimeline，转发到朋友圈
• onAddToFavorites，收藏
• onPageScroll，监听屏幕的滚动
• onResize，监听页面尺寸
• onTabItemTap，当前页面为 tab 页时，点击触发

3.2、路由跳转

跳转到 tab 页面

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

跳转到普通页面

**wx.redirectTo：**关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

**wx.navigateTo：**保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层。

**wx.navigateBack：**关闭当前页面，返回上一页面或多级页面。

跳转到任意页面

wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

路由传参

wx.navigateTo({
    url: 'page?id=1',
});

在页面的 onLoad 生命周期中接收路由参数

Page({
    onLoad(options) {
        console.log(options.id);
    },
});

3.3、数据缓存

同步操作

• 保存数据，wx.setStorageSync()
• 获取数据，wx.getStorageSync()
• 删除数据，wx.removeStorageSync()
• 清空数据，wx.clearStorageSync()

异步操作

• 保存数据，wx.setStorage(options)
• 获取数据，wx.getStorage(options)
• 删除数据，wx.removeStorage(options)
• 清空数据，wx.clearStorage(options)

3.4、组件化

3.4.1、官方组件

3.4.2、自定义组件

在 components 目录下创建组件文件

在页面的 .json 文件使用 usingComponents 导入组件

3.4.3、第三方组件

npm 安装 UI 组件库

在小程序开发工具中构建 npm

3.5、网络请求

使用 wx.request() 发送 HTT 请求。request(option) 参数是一个对象类型，常用的参数对象属性有：

• rul，请求的 HTTP 地址
• data，请求参数
• method，请求方法
• success，请求成功的回调函数
• timeout，超时时间

3.6、界面交互

• wx.showToast()，轻提示（吐司）
• wx.showModal，提示框
• wx.showLoading，加载提示框
• wx.showActionSheet，底部操作菜单

4、小程序开发拓展

4.1、硬件能力

4.2、云开发能力

4.2.1、云数据库

创建云数据库对象：

const db = wx.cloud.database();

选择集合：

db.collection('集合名称');

添加数据：

db.collection('集合名称').add({
    data: {
        字段名: 值，
        ...
    },
    success: (res)=>{ //成功的回调函数

    }
})

修改数据：

//更新单个数据
db.collection('集合名称')
    .doc(id)
    .update({
        data: {
            字段名: 新值, //要更新的字段
        },
        success() {},
    });

//对元素做复杂的更新操作，例如，自增、自乘、数组的追加等
const c = db.command;
db.collection('集合名称')
    .doc(id)
    .update({
        data: {
            字段名: c.inc(1), //对当前字段的自增
        },
        success() {},
    });

删除数据：

//删除一条数据
db.collection('集合名称')
    .doc(id)
    .remove({
        success() {},
    });

//删除多条数据
// 在云函数中 使用了 async await 语法
const cloud = require('wx-server-sdk');
const db = cloud.database();
const _ = db.command;

exports.main = async (event, context) => {
    try {
        return await db
            .collection('todos')
            .where({
                done: true,
            })
            .remove();
    } catch (e) {
        console.error(e);
    }
};

查询数据：

//查询单条数据
db.collection('集合名称')
    .doc(id)
    .get({
        success(res) {},
    });

//按条件查询多条
db.collection('集合名称')
    .where({
        _openid: 'xxx',
    })
    .get({
        success(res) {},
    });

//查询集合
db.collection('集合名称').get({
    success(res) {},
});

//使用Promise的方式查询
db.collection('集合名称')
    .get()
    .then((res) => {});

4.2.2、云存储

上传文件：

//上传功能
wx.cloud.uploadFile({
    cloudPath: 'example.png', // 上传至云端的路径
    filePath: '', // 小程序临时文件路径
    success: (res) => {
        // 返回文件 ID
        console.log(res.fileID);
    },
    fail: console.error,
});

//示例：上传本地相册图片
// 让用户选择一张图片
wx.chooseImage({
    success: (chooseResult) => {
        // 将图片上传至云存储空间
        wx.cloud.uploadFile({
            // 指定上传到的云路径
            cloudPath: 'my-photo.png',
            // 指定要上传的文件的小程序临时文件路径
            filePath: chooseResult.tempFilePaths[0],
            // 成功回调
            success: (res) => {
                console.log('上传成功', res);
            },
        });
    },
});

下载文件：

wx.cloud.downloadFile({
    fileID: '', // 文件 ID
    success: (res) => {
        // 返回临时文件路径
        console.log(res.tempFilePath);
    },
    fail: console.error,
});

删除文件：

wx.cloud.deleteFile({
    fileList: ['a7xzcb'],
    success: (res) => {
        // handle success
        console.log(res.fileList);
    },
    fail: console.error,
});

4.2.3、云函数

在小程序开发者工具中创建云函数，例如，云函数名称为 demo

云函数的示例代码：

// 云函数入口文件
const cloud = require('wx-server-sdk');

cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext();

    return {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
    };
};

在云函数中接收外界传参数：

exports.main = async (event, context) => {
    //解构外界传参，参数对象的属性是{a:xx, b:xx}
    let { a, b } = event;

    //使用return向外界返回数据
    return {
        sum: a + b,
    };
};

在小程序中调用云函数：

wx.cloud.callFunction({
    name: 'demo',
    data: {
        a: 1,
        b: 2,
    },
    complete: (res) => {
        //调用云函数的返回结果
    },
});

//使用Promise的方式调用云函数
wx.cloud
    .callFunction({
        name: 'demo',
        data: {
            a: 1,
            b: 2,
        },
    })
    .then((res) => {
        //获取云函数返回结果
    });

4.3、全栈开发能力

第一步：搭建服务端

创建项目

express -e todo
cd todo
cnpm i

安装数据库依赖

cnpm i mongoose --save

路由设计

//添加数据 http://localhost:3000/todo/add，参数 title
route.post('/todo/add');

//修改数据 http://localhost:3000/todo/update，参数 title,_id
route.post('/todo/update');

//删除数据  http://localhost:3000/todo/del，参数 _id
route.get('/todo/del');

//查询单条数据  http://localhost:3000/todo/find，参数 _id
route.get('/todo/find');

//查询多条数据  http://localhost:3000/todo/query，参数 page
route.get('/todo/query');

Schema 文档对象设计

schema({
    title: String,
    createTime: Number,
});

第二步：搭建后台管理系统 UI

安装脚手架

cnpm i -g @vue/cli

创建项目

vue create todo

安装依赖

cnpm i axios --save
cnpm i element-ui --save

项目初始化：

1、全局引入 axios 模块，在 main.js

import axios from 'axios';
Vue.prototype.$axios = axios;

2、全局引入 ElementUI，在 main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三步：小程序开发

创建云函数，示例代码

小程序自己补充

小程序中比较核心的部分为：
一：
（1）全局配置
（2）页面配置

二：云开发
（1）云数据库
小程序提供了一个他们自己的云数据库，这样就不需要自己在外面建立其他数据库然后再调用了，可以直接在小程序上面的数据库中建立然后调用。
首先应获取建立的数据库：

const db = wx.cloud.database();

获取到数据库后通过方法进行数据库的相关操作：

db.collection('数据库的名称').where/doc('条件，一般为 openId')/.add/remove/updata/get({
    success:(res)=>{ //这里之所以用箭头函数，是为了解决 this 指向的问题
       console.log(res)
}
})

（2）云函数
小程序还提供了云函数的功能，就是运行在云端的代码，无需管理服务器，在开发工具内编写，一键上传部署就可以运行后端代码。
要先在 cloudfunctions 里面建立一个云函数文件夹，在里面 index.js 里面写云函数，写完后抛出，然后在新建的云函数文件夹上右键，选择上传并部署，这里选择的是不上传 node-modules,
然后就可以在云端函数中看到上传的云函数了。调用看文档
（3）云存储
云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。
这里通过上传文件或者照片存放在云端，然后利用

wx.chooseImage({
    // 通过这个方法获取本地文件（就是打开本地文件夹找图片）
    success: (res) => {
        //成功后的回调
        console.log(res);
        console.log(res.tempFilePaths[0]); //获取文件地址
        wx.cloud.uploadFile({
            //通过这个方法将文件上传到云端
            cloudPath: 'hello.jpg', //上传到云端的文件名称
            filePath: res.tempFilePaths[0], //上传到云端的路径
            success: (res) => {
                //上传成功后的回调
                console.log(res.fileID); //获取返回的 fileID
                wx.cloud.downloadFile({
                    //下载文件例如图片
                    fileID: res.fileID,
                    success: (res) => {
                        //下载成功后将文件显示
                        // console.log(res.tempFilePath);
                        console.log(res.tempFilePath);
                        // console.log(res.tempFilePath)
                        this.setData({
                            imgUrl: res.tempFilePath,
                        });
                    },
                });
            },
        });
    },
});

最后

以上就是和谐玫瑰为你收集整理的微信小程序学习笔记1、初始小程序2、小程序开发基础入门3、小程序开发进阶4、小程序开发拓展的全部内容，希望文章能够帮你解决微信小程序学习笔记1、初始小程序2、小程序开发基础入门3、小程序开发进阶4、小程序开发拓展所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。