We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品:
本小程序的包含三部分的功能:
感兴趣的通过上面的小程序码,自行体验~
好了,直接上开发的过程吧~
通过微信开发者工具新建项目。
点击超大的+号 -> 输入自己申请的小程序的AppId -> 后端服务勾选'小程序.云开发'
按照上面的简单操作就可以进入你新建的小程序了,简单快捷。
初始化后项目的代码目录结构:
├── cloudfunctions # 云函数 ├── miniprogram # 小程序前台部分 ├── README.md # 代码文档说明 └── project.config.json # 项目配置文件
PS: 要申请自己的小程序噢,测试的AppId没支持云开发
然后通过按钮云开发进入你的云开发控制台:
云开发
嘿嘿嘿,在接下来的一个月时间,你就可以免费使用资源均衡型-基础版1一个月时间。
资源均衡型-基础版1
一个月时间,对于写简单的demo绰绰有余啊~
demo
这里使用的UI框架是Vant Weapp。能快速开发好看的UI。
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>
得到的效果图如下:
嗯~为了做一个虽然简单但是有些完整的小程序,我特地配置了下攻略的指导板块。
相关的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>
效果如下:
这里调用的接口,我以guide.wxml中的数据courseList为例吧 - 就是一个步骤说明的数据。其需要的数据结构是:
guide.wxml
courseList
data: [{ step: 1, title: 'this is step1', img: 'step 1 image note' }]
在小程序的云开发控制台上操作。
云开发控制台
数据库上新建集合,这里我命名为course,之后在此集合中添加记录。我这里有5个步骤说明,所以新建了五条数据,如下:
course
添加记录
之后,你就可以在相关的JS文件中新建查询。
JS
onGetCourse: function() { const db = wx.cloud.database(); db.collection('course') .where({ show: 1 }) .get({ success: res => { this.setData({ courseList: res.data || [] }) }, fail: err => {} }) }
只是通过上面的函数我们并不能获取到数据,我们还得去设置数据权限:
之后,上传代码,提审上线即可。到这里,你就可以愉快地玩爽了,如下:
如果本文对你开发小程序有所帮助,点赞鼓励下噢~
The text was updated successfully, but these errors were encountered:
No branches or pull requests
某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品:
本小程序的包含三部分的功能:
感兴趣的通过上面的小程序码,自行体验~
好了,直接上开发的过程吧~
初始化项目
通过微信开发者工具新建项目。
按照上面的简单操作就可以进入你新建的小程序了,简单快捷。
初始化后项目的代码目录结构:
然后通过按钮
云开发
进入你的云开发控制台:嘿嘿嘿,在接下来的一个月时间,你就可以免费使用
资源均衡型-基础版1
一个月时间。一个月时间,对于写简单的
demo
绰绰有余啊~编写看得过去的页面部分
这里使用的UI框架是Vant Weapp。能快速开发好看的
UI
。首页页面结构代码如下:
得到的效果图如下:
嗯~为了做一个虽然简单但是有些完整的小程序,我特地配置了下攻略的指导板块。
相关的j页面结构代码如下:
效果如下:
编写调得通的api接口
这里调用的接口,我以
guide.wxml
中的数据courseList
为例吧 - 就是一个步骤说明的数据。其需要的数据结构是:在小程序的
云开发控制台
上操作。数据库上新建集合,这里我命名为
course
,之后在此集合中添加记录
。我这里有5个步骤说明,所以新建了五条数据,如下:之后,你就可以在相关的
JS
文件中新建查询。只是通过上面的函数我们并不能获取到数据,我们还得去设置数据权限:
之后,上传代码,提审上线即可。到这里,你就可以愉快地玩爽了,如下:
如果本文对你开发小程序有所帮助,点赞鼓励下噢~
The text was updated successfully, but these errors were encountered: