小程序开发第一章总结

最新推荐文章于 2024-09-25 15:51:33 发布

2301_81895459

最新推荐文章于 2024-09-25 15:51:33 发布

阅读量387

点赞数 7

文章标签：编辑器

本文链接：https://blog.csdn.net/2301_81895459/article/details/136391112

版权

认识微信小程序

微信之父张小龙曾经解释：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想。

创建第一个小程序项目

// 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();
    });
  }
});

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

<!--index.wxml-->
<view class="container">

  <view class="title">快速了解云开发</view>

  <view class="top_tip">免鉴权接口调用 免部署后台 高并发</view>

  <view class="power" wx:key="title" wx:for="{{powerList}}" wx:for-item="power">
    <view class="power_info" data-index="{{index}}" bindtap="onClickPowerInfo">
      <view class="power_info_text">
        <view class="power_info_text_title">
          {{power.title}}
          <view class="power_info_text_tag" wx:if="{{power.tag}}">{{power.tag}}</view>
        </view>
        <view class="power_info_text_tip">{{power.tip}}</view>
      </view>
      <image wx:if="{{!power.showItem && power.item.length}}" class="power_info_more" src="../../images/arrow.svg"></image>
      <image wx:if="{{power.showItem && power.item.length}}" class="power_info_less" src="../../images/arrow.svg"></image>
      <image wx:if="{{!power.item.length}}" class="power_item_icon" src="../../images/arrow.svg"></image>
    </view>
    <view wx:if="{{power.showItem}}">
      <view wx:key="title" wx:for="{{power.item}}">
        <view class="line"></view>
        <view class="power_item" bindtap="jumpPage" data-page="{{item.page}}">
          <view class="power_item_title">{{item.title}}</view>
          <image class="power_item_icon" src="../../images/arrow.svg"></image>
        </view>
      </view>
    </view>
  </view>

  <view class="environment" bindtap="onChangeShowEnvChoose">当前环境 {{ selectedEnv.alias }}</view>

  <cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>

</view>

/**index.wxss**/

page {
  padding-top: 54rpx;
  background-color: #f6f6f6;
  padding-bottom: 60rpx;
}

.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  font-size: 44rpx;
  margin-bottom: 40rpx;
}

.top_tip {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  margin-bottom: 28rpx;
}

.power {
  margin-top: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 93%;
  padding-bottom: 1rpx;
}

.power_info {
  display: flex;
  padding: 30rpx 25rpx;
  align-items: center;
  justify-content: space-between;
}

.power_info_more {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.power_info_less {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(270deg);
}

.power_info_text {
  display: flex;
  flex-direction: column;
}

.power_info_text_title {
  margin-bottom: 10rpx;
  font-weight: 400;
  font-size: 35rpx;
  display: flex;
  align-items: center;
}

.power_info_text_tag {
  margin-left: 20rpx;
  background-color: #fbe0e0;
  color: #e54545;
  padding: 0 7px;
  font-size: 14px;
  vertical-align: middle;
  border-radius: 3px;
}

.power_info_text_tip {
  color: rgba(0, 0, 0, 0.4);
  font-size: 25rpx;
}

.power_item {
  padding: 30rpx 25rpx;
  display: flex;
  justify-content: space-between;
}

.power_item_title {
  font-size: 30rpx;
}

.power_item_icon {
  width: 30rpx;
  height: 30rpx;
}

.line {
  width: 95%;
  margin: 0 auto;
  height: 2rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

.environment {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-top: 25%;
}