微信小程序概述

���录

认识小程序

简介：

特征：

场景：

我的第一个微信小程序

index.js代码如下：

index.json代码如下： 

index.wxml代码如下：

index.wxss代码如下： 

运行效果：

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

模拟区：

文件目录区：

编辑区：

调试区：

1）Console面板：

2）Sources面板：

3）Network面板：

4）Securit面板：

5）Storage面板：

6）AppDate面板：

 7)  Wxml面板:

8）Sensor面板：

9）Trace面板：

总结：

---

认识小程序

简介：

微信(WeChat) 是腾讯公司于2011年1月21 日推出的一款为智能终端提供即时通信服务的应用程序。小程序、订阅号、服务号、企业微信（企业号）属于微信公众平台的四大生态体系，它们面向不同的用户群体，应用于不同的方向和用途。小程序是微信的一种新的开发能力，具有出色的用户使用体验，可以在微信内被便捷地获取和传播；订阅号为媒体和个人提供一种新的信息传播方式，构建信息发布者与浏览者之间更好的沟通与管理模式；服务号为企业和组织提供更强大的服务与用户管理能力，帮助企业快速实现全新的公众号服务平台；企业微信（公众号）为企业提供专业的通信工具、丰富的办公应用与应用程序接口(Application Programming Interface, API)，助力企业高效沟通与办公。

特征：

小程序嵌入微信之中，不需要下载安装外部应用，用户通过扫描二维码和搜索相关功能的关键词即可使用，具备无须安装、触手可及、用完即走、无须卸载的特性。小程序可以被理解为“镶嵌在微信的超级 App"。

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

  场景：

  1. 简单的业务逻辑，"简单"是指应用本身的业务逻辑并不复杂.
  2. 低频率的使用场景, "低频度"是小程序使用场景的另一个特点.

  我的第一个微信小程序

  index.js代码如下：

  // index.js// const app = getApp()const { envList } = require('../../envList.js');Page({  data: {    showUploadTip: false,    powerList: [{      title: '云函数',      tip: '安全、免鉴权运行业务代码',      showItem: false,      item: [{        title: '获取OpenId',        page: 'getOpenId'      },      //  {      //   title: '微信支付'      // },       {        title: '生成小程序码',        page: 'getMiniProgramCode'      },      // {      //   title: '发送订阅消息',      // }    ]    }, {      title: '数据库',      tip: '安全稳定的文档型数据库',      showItem: false,      item: [{        title: '创建集合',        page: 'createCollection'      }, {        title: '更新记录',        page: 'updateRecord'      }, {        title: '查询记录',        page: 'selectRecord'      }, {        title: '聚合操作',        page: 'sumRecord'      }]    }, {      title: '云存储',      tip: '自带CDN加速文件存储',      showItem: false,      item: [{        title: '上传文件',        page: 'uploadFile'      }]    },{      title: '云模板',      tip: '基于页面模板，快速配置、搭建小程序页面',      tag: 'new',      page: 'singleTemplate',    }, {      title: '云后台',      tip: '开箱即用的小程序后台管理系统',      page: 'cloudBackend',    }, {      title: '云托管',      tip: '不限语言的全托管容器服务',      link: 'https://cloud.weixin.qq.com/cloudrun',    }],    envList,    selectedEnv: envList[0],    haveCreateCollection: false  },  onClickPowerInfo(e) {    const index = e.currentTarget.dataset.index;    const powerList = this.data.powerList;    const selectedItem = powerList[index];    selectedItem.showItem = !selectedItem.showItem;    if (selectedItem.link) {      wx.navigateTo({        url: `../web/index?url=${selectedItem.link}&title=${selectedItem.title}`,      });    } else if (selectedItem.page) {      wx.navigateTo({        url: `/pages/${selectedItem.page}/index`,      });    } else if (selectedItem.title === '数据库' && !this.data.haveCreateCollection) {      this.onClickDatabase(powerList);    } else {      this.setData({        powerList      });    }  },  onChangeShowEnvChoose() {    wx.showActionSheet({      itemList: this.data.envList.map(i => i.alias),      success: (res) => {        this.onChangeSelectedEnv(res.tapIndex);      },      fail (res) {        console.log(res.errMsg);      }    });  },  onChangeSelectedEnv(index) {    if (this.data.selectedEnv.envId === this.data.envList[index].envId) {      return;    }    const powerList = this.data.powerList;    powerList.forEach(i => {      i.showItem = false;    });    this.setData({      selectedEnv: this.data.envList[index],      powerList,      haveCreateCollection: false    });  },  jumpPage(e) {    wx.navigateTo({      url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,    });  },  onClickDatabase(powerList) {    wx.showLoading({      title: '',    });    wx.cloud.callFunction({      name: 'quickstartFunctions',      config: {        env: this.data.selectedEnv.envId      },      data: {        type: 'createCollection'      }    }).then((resp) => {      if (resp.result.success) {        this.setData({          haveCreateCollection: true        });      }      this.setData({        powerList      });      wx.hideLoading();    }).catch((e) => {      console.log(e);      this.setData({        showUploadTip: true      });      wx.hideLoading();    });  }});

  index.json代码如下： 

  {  "usingComponents": {    "cloud-tip-modal": "/components/cloudTipModal/index"  }}

  index.wxml代码如下：

    快速了解云开发  免鉴权接口调用 免部署后台 高并发