微信小程序第一章总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_74842188/article/details/136417855

认识微信小程序

简介：微信小程序是一种集成在微信内部的应用程序，用户可以直接在微信中使用，不需要下载安装。随着微信用户的不断增加，微信小程序逐渐成为商家们进行移动互联网营销的重要选择。小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

特征·：

1. 无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2. 触手可及
用户通过扫描二维码等形式直接进入小程序，实现见线下场景与线上应用的即时联通。
3. 用完即走
用户在线下场景中，当有相关需求时，可以直接接妾入小程序，使用服务功能后便可以对其不理会，实现用完即走。
4. 无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

应用场景特点：

1.简单的业务逻辑

2.低频的使用场景

我的第一个微信小程序

project.config.json

{
  "compileType": "miniprogram",
  "libVersion": "trial",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "auto",
    "tabSize": 2
  },
  "appid": "wxa699087b2106ca1f"
}

app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

运行结果

微信小程序开发者工具界面功能介绍

1.工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
2. 模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
3.目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
4.编辑区

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js 及.json 文件作，使用组合键能提高代码的编辑效率。

5.调试区

调试区的功能是帮助开发者进行代码调试及排查有问题的区域。