从零开发简易微信小程序

简介: 某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品:

某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能。


本小程序包含三部分的功能:


  1. 商品banner图片的展示


       b.商品列表的展示


  • 2.1 热门商品的展示
  • 2.2 普通商品的展示


       c.小程序的指南说明


感兴趣的通过上面的小程序码,自行体验~


好了,直接上开发的过程吧~


初始化项目


通过微信开发者工具新建项目。


点击超大的+号 -> 输入自己申请的小程序的AppId -> 后端服务勾选'小程序.云开发'


按照上面的简单操作就可以进入你新建的小程序了,简单快捷。


初始化后项目的代码目录结构:


├── cloudfunctions # 云函数
├── miniprogram # 小程序前台部分
├── README.md # 代码文档说明
└── project.config.json # 项目配置文件
复制代码


PS: 要申请自己的小程序噢,测试的AppId没支持云开发


然后通过按钮云开发进入你的云开发控制台:


image.png


嘿嘿嘿,在接下来的一个月时间,你就可以免费使用资源均衡型-基础版1


image.png


编写看得过去的页面部分


这里使用的UI框架Vant Weapp。能快速开发好看的UI


首页页面结构代码如下:


<!--index.wxml-->
<view class="index-page">
  <view class="navigation" style="{{navStyle}}">
    <view class="nav-text" style="{{navTextStyle}}">{{navTitle}}</view>
  </view>
  <view style="{{navStyle}}"></view>
  <view style="width: 100%; height: 300rpx; overflow: hidden;">
    <swiper 
      class="swiper"
      indicator-dots="true"
      autoplay="true" interval="5000" duration="500">
      <block wx:for="{{bannerList}}" wx:key="index">
        <swiper-item class="swiper-item" bindtap="previewGoods" data-item="{{item}}">
          <image class="swiper-img" src="{{item.url}}" mode="widthFix"></image>
          <text class="swiper-title">{{item.title}}</text>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view style="width: 100%;">
    <van-notice-bar
      left-icon="volume-o"
      text="{{notice}}"
    />
  </view>
  <view class="hot-list">
    <view wx:for="{{hotList}}" wx:key="index">
      <van-card
        tag="热门"
        origin-price="原价 {{item.origin}}"
        price="券后 {{item.current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
  </view>
  <view class="goods-list" wx:if="{{goodsList.length > 0}}">
    <view wx:for="{{goodsList}}" wx:key="index">
      <van-card
        origin-price="原价 {{item.origin}}"
        price="券后 {{item.current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
    <view class="no-more-data">
      <van-icon name="smile-comment-o" style="margin-right: 10rpx;"/>没有更多数据...
    </view>
  </view>
  <van-popup round show="{{showPopup}}" wx:if="{{isLoaded}}" close-on-click-overlay="{{false}}">
    <guide-modal wx:if="{{popupType===1}}" bind:closeGuide="onCloseGuide" courseList="{{courseList}}" goodsItem="{{toGuideItem}}"></guide-modal>
  </van-popup>
  <view bindtap="openGuide" class="strategy-btn">
    <van-button 
      size="small" 
      color="linear-gradient(to right, #f00, #EC644E)" 
      icon="send-gift-o">
      攻略
    </van-button>
  </view>
</view>
复制代码


得到的效果图如下:


image.png


嗯~为了做一个虽然简单但是有些完整的小程序,我特地配置了下攻略的指导板块。


相关的guide.wxml页面结构代码如下:


<!--guide.wxml-->
<view class="guideModal" style="margin-top: {{mgTop}}px">
  <view class="guideModal-head">
    <van-icon customStyle="display: block;margin-right: 4px;" name="info-o" size="16"></van-icon>
    <text>领券购买步骤</text>
  </view>
  <view class="guideModal-body">
    <view class="guide-item">
      <view class="guide-item-num">1</view>
      <view class="guide-item-content">
        <text>了解完步骤点击下方按钮,进行操作吧</text>
      </view>
    </view>
    <view class="guide-item" wx:for="{{courseList}}" wx:for-item="course" wx:key="index">
      <view class="guide-item-num">{{course.step+1}}</view>
      <view class="guide-item-content">
        <text>{{course.title}}</text>
        <image class="image" mode="widthFix" src="{{course.img}}"></image>
      </view>
    </view>
  </view>
  <view class="guideModal-footer">
    <view class="footer-btn" bindtap="iKnow">我知道了</view>
  </view>
</view>
复制代码


编写调得通的api接口


这里调用的接口,我以guide.wxml中的数据courseList为例吧 - 就是一个步骤说明的数据。其需要的数据结构是:


data: [{
  step: 1,
  title: 'this is step1',
  img: 'step 1 image note'
}]
复制代码


在小程序的云开发控制台上操作。


数据库上新建集合,这里我命名为course,之后在此集合中添加记录。我这里有5个步骤说明,所以新建了五条数据,如下:


image.png


之后,你就可以在相关的JS文件中新建查询。


onGetCourse: function() {
  const db = wx.cloud.database();
  db.collection('course')
      .where({
        show: 1
      })
      .get({
        success: res => {
          this.setData({
            courseList: res.data || []
          })
        },
        fail: err => {}
      })
}
复制代码


只是通过上面的函数我们并不能获取到数据,我们还得去设置数据权限


image.png


之后,上传代码,提审上线即可。



相关文章
|
9天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2185 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
2月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
2月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。

热门文章

最新文章