从零开发简易微信小程序
**
从零开发简易微信小程序
**
某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品:
本小程序的包含三部分的功能:
1.商品banner图片的展示
2.商品列表的展示
2.1 热门商品的展示
2.2 普通商品的展示
3.小程序的指南说明
感兴趣的小伙伴点击链接,了解详情~
http://github.crmeb.net/u/yi
好了,直接上开发的过程吧~
初始化项目
通过微信开发者工具新建项目。
点击超大的+号 -> 输入自己申请的小程序的AppId -> 后端服务勾选’小程序.云开发’
按照上面的简单操作就可以进入你新建的小程序了,简单快捷。
初始化后项目的代码目录结构:
├── cloudfunctions # 云函数
├── miniprogram # 小程序前台部分
├── README.md # 代码文档说明
└── project.config.json # 项目配置文件
复制代码
PS: 要申请自己的小程序噢,测试的AppId没支持云开发
然后通过按钮云开发进入你的云开发控制台
嘿嘿嘿,在接下来的一个月时间,你就可以免费使用资源均衡型-基础版1一个月时间。
一个月时间,对于写简单的demo绰绰有余啊~
编写看得过去的页面部分
这里使用的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-barleft-icon="volume-o"text="{{notice}}"/></view><view class="hot-list"><view wx:for="{{hotList}}" wx:key="index"><van-cardtag="热门"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-cardorigin-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>
得到的效果图如下:
嗯~为了做一个虽然简单但是有些完整的小程序,我特地配置了下攻略的指导板块。
相关的j页面结构代码如下:
<!--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个步骤说明,所以新建了五条数据,如下:
之后,你就可以在相关的JS文件中新建查询。
onGetCourse: function() {const db = wx.cloud.database();db.collection('course').where({show: 1}).get({success: res => {this.setData({courseList: res.data || []})},fail: err => {}})
}
只是通过上面的函数我们并不能获取到数据,我们还得去设置数据权限:
之后,上传代码,提审上线即可。到这里,你就可以愉快地玩爽了,如下:
作者:Jimmy
链接:http://github.crmeb.net/u/yi
从零开发简易微信小程序相关推荐
- 基于云开发的微信小程序:个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求 第一次作业 第二次作业 结课作业 小程序开发入门 开发前的准备 注册微信小程序 新建一个模板小程序 开通云开发服务 第一次作业 参考资 ...
- 都2020年,开发制作微信小程序商城,需要准备什么资料?应该不会不知道吧!
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利 从腾讯刚发布的财报看,微信 ...
- vue.js反编译_基于electron-vue开发的微信小程序反编译客户端
开源一个小程序反编译客户端 咨询小程序反编译的同学比较多,虽然有开源库但是还是有同学不清楚如何去操作,所以索性做了一个客户端方便进行小程序的反编译 # 技术选型 网上已经有大佬实现了C#版的反编译工具 ...
- core和node开发小程序_成都小程序开发:微信小程序开发要多少钱?
定制开发一个微信小程序要多少钱呢? 成都小程序开发需要多少钱,成都小程序定制多少钱,成都小程序开发获得报价 微信小程序背靠腾讯的亿级流量,有着非常强大的线上引流功能,目前微信小程序的开发越来越火爆,选 ...
- 一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 复制代码 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位 ...
- 新开发的微信小程序怎样推广引流?
新开发的微信小程序10个实用推广引流方法 1.微信小程序关键词排名 微信小程序的排名跟名称.描述.上线时间.用户访问量和微信小程序的综合质量有关,且微信小程序的名称是唯一的. 2. 附近的微信小程序展 ...
- 云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介 点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址 先去网站上http ...
- 微信小程序+PHP 从零写一个微信小程序
微信小程序是越来越火,参与其中的开发者也越来越多,但是很多朋友都是只懂小程序前端开发,或者是只懂 PHP 开发,本 Chat 就是想让这部分人能够自己一个人把前后端串起来,做一个专属自己的微信小程序. ...
最新文章
- php 工厂静态类,静态工厂模式(Static Factory)
- bootstrap清除拟态框内添加新HTML再打开时会有缓存现象
- python 文案自动生成_Python应用 | 利用COM技术自动生成IBM i2舞弊关系分析图表
- A + B Problem II
- Django中model新建数据表操作后admin页面不更新问题
- 图像处理程序,在状态栏显示图像尺寸
- 5. JavaScript RegExp 类型
- 19.12添加自定义监控项目19.13/19.14 配置邮件告警19.15 测试告警19.16 不发邮件的问题处理...
- 《深入浅出struts》读书笔记(3)
- 如何在vue中使用阿里图标库
- unity 粒子特效优化
- 10mbps 局域网组播_80211 组播速率及组播转单播
- UiPath:以API接口方式启动流程
- LRU算法,走迷宫,数根,星际战争
- 【docker】Dockerfile
- Vue中监听页面刷新和关闭beforeunload事件
- 快速找出QQ群成员中不在名单内的人
- 计算机主板电池没电了 会怎么样,电脑主板电池没电会怎样
- Chrome DevTools 实现原理与性能分析实战
- Revit 版本对应的 Dynamo 版本
热门文章
- 手机号格式检查系统(Java)
- Android底部导航栏+消息提醒
- python manage.py runserver/collectstatic gunicorn 三者命令详情
- 利用单级栅电压驱动IGBT
- centOS 8 安装teamview
- MySQL 8.0 配置mysql_native_password身份验证插件的密码
- 各平台舆情信息的收集方式方法
- linux中的ssh安装、卸载与配置
- 以三维地图和倾斜摄影为基础的CIM托底,以三维视频融合或投影融合为核心的时空克隆为引擎,以混合架构模式构建的魔镜平台,将成为元宇宙的主流 点卯+魔镜系列
- python素数求和编程_Python练习题4.2统计素数并求和