提交 1d226ec5 编写于 作者: yma16's avatar yma16

小程序主题框架

上级 ce314435
// app.js
App({
onLaunch: function () {
getUserProfile: function (e) {
// 推荐使用 wx.getUserProfile 获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
onLaunch: function (options) {
console.log('start')
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力');
} else {
......@@ -13,7 +27,59 @@ App({
traceUser: true,
});
}
// 用户授权
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.info('用户授权', res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
this.globalData = {};
// 用户登录
let host = "https://example.com/onLogin"
wx.login({
success(res) {
console.log('res login', res)
console.log('res code', res.code)
// if (res.code) {
// //发起网络请求
// wx.request({
// url: host,
// data: {
// code: res.code
// }
// })
// } else {
// console.log('登录失败!' + res.errMsg)
// }
}
})
let setting = null;
wx.getSetting({
success(res) {
setting = res
console.log('res', res)
}
})
this.globalData = { setting: setting };
console.log('onLaunch', options)
},
onShow(options) {
// Do something when show.
console.info('show', options)
},
onHide(options) {
console.info('onHide', options)
// Do something when hide.
},
onError(msg) {
console.log('error', msg)
}
});
{
"pages": [
"pages/index/index",
"pages/getOpenId/index",
"pages/getMiniProgramCode/index",
"pages/deployService/index",
"pages/createCollection/index",
"pages/uploadFile/index",
"pages/selectRecord/index",
"pages/updateRecord/index",
"pages/updateRecordResult/index",
"pages/updateRecordSuccess/index",
"pages/sumRecord/index",
"pages/sumRecordResult/index"
"pages/home/home",
"pages/homeContent/homeContent",
"pages/blog/blog",
"pages/life/life",
"pages/future/future"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
"navigationBarBackgroundColor": "#262626",
"navigationBarTitleText": "阳光罐里的日记",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap.json",
"style": "v2",
......
......@@ -4,17 +4,18 @@
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
color: #fff;
}
button {
background: initial;
}
button:focus{
button:focus {
outline: 0;
}
button::after{
button::after {
border: none;
}
......
// pages/blog/blog.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
<!--pages/blog/blog.wxml-->
<text>pages/blog/blog.wxml</text>
/* pages/blog/blog.wxss */
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
},
});
<view class="page">
<view class="title">功能介绍</view>
<view class="info">集合为常用数据库中表的概念。云开发数据库支持自动备份、无损回档,并且QPS高达3千+。</view>
<view class="title">如何体验</view>
<view class="info">已自动创建名为“sales”的体验合集,可打开“云开发控制台>数据库>记录列表”中找到该集合。</view>
<image class="img" src="../../images/database.png"></image>
</view>
page {
background-color: white;
padding-bottom: 50px;
}
.page {
padding: 0 32px;
}
.title {
margin-top: 16px;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
.info {
margin-top: 12px;
font-size: 17px;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.img {
margin-top: 16px;
width: 100%;
}
\ No newline at end of file
// miniprogram/pages/deployService/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
});
<!--miniprogram/pages/deployService/index.wxml-->
<view class="page">
<view class="title">功能介绍</view>
<view class="info">云托管是全托管的容器服务,支持任何语言及框架运行,只需将已有业务代码打包上传,即可快速迁移。</view>
<view class="title">如何体验</view>
<view class="info">步骤一:切换按量付费,打开“云开发控制台>设置>环境设置”找到按量付费,点击切换。</view>
<image class="img" src="../../images/deploy_step1.png"></image>
<view class="info">步骤二:开通云托管,体验相关能力</view>
<image class="img" src="../../images/deploy_step2.png"></image>
</view>
/* miniprogram/pages/deployService/index.wxss */
page {
background-color: white;
padding-bottom: 50px;
}
.page {
padding: 0 32px;
}
.title {
margin-top: 16px;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
.info {
margin-top: 12px;
font-size: 17px;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.img {
margin-top: 16px;
width: 100%;
}
\ No newline at end of file
// pages/future/future.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
<!--pages/future/future.wxml-->
<text>pages/future/future.wxml</text>
/* pages/future/future.wxss */
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetCodeSrc: false,
envId: '',
codeSrc: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
},
getCodeSrc() {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'getMiniProgramCode'
}
}).then((resp) => {
this.setData({
haveGetCodeSrc: true,
codeSrc: resp.result
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
clearCodeSrc() {
this.setData({
haveGetCodeSrc: false,
codeSrc: ''
});
}
});
{
"navigationBarTitleText": "生成小程序码",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">可通过云函数免接口调用凭证,直接生成小程序码。</view>
<view class="box_text" wx:if="{{!codeSrc}}">小程序码将展示在这里</view>
<view wx:if="{{codeSrc}}" class="code_box">
<image class="code_img" src="{{codeSrc}}"></image>
</view>
<view class="button" bindtap="getCodeSrc" wx:if="{{!haveGetCodeSrc}}">生成小程序码</view>
<view class="button_clear" bindtap="clearCodeSrc" wx:if="{{haveGetCodeSrc}}">清空</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>getMiniProgramCode>index.js“找到获取小程序码函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx 0;
}
.code_img {
width: 600rpx;
height: 600rpx;
}
.button {
width: 300rpx;
text-align: center;
margin: 20% auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 20% auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetOpenId: false,
envId: '',
openId: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
},
getOpenId() {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'getOpenId'
}
}).then((resp) => {
this.setData({
haveGetOpenId: true,
openId: resp.result.openid
});
wx.hideLoading();
}).catch((e) => {
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
clearOpenId() {
this.setData({
haveGetOpenId: false,
openId: ''
});
}
});
{
"navigationBarTitleText": "获取OpenId",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">无需维护鉴权机制及登录票据,仅一行代码即可获得。</view>
<view class="box_text">{{ openId ? openId : 'OpenID将展示在这里' }}</view>
<view class="button" bindtap="getOpenId" wx:if="{{!haveGetOpenId}}">获取OpenId</view>
<view class="button_clear" bindtap="clearOpenId" wx:if="{{haveGetOpenId}}">清空</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>getOpenId>index.js“找到获取openId函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.button {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
title: 'header',
userInfo: '',
content: '我是父组件的content',
footContent: "bottomContent",
background: [{class:'header-swiper-one',content:'数据分析'}, {class:'header-swiper-two',content:'前端开发'}, {class:'header-swiper-three',content:'全栈开发'}],
indicatorDots: true,
headerContent:'swiper',
vertical: false,
autoplay: true,
interval: 5000,
duration: 1000,
menuIsShow:false,
bottomBtn:'front'
},
// 监听
watch:{
bottomBtn:function(newVal,oldVal){
console.log('监听',newVal,oldVal)
}
},
// 自定义函数
changeIndicatorDots() {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay() {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
this.setData({
interval: e.detail.value
})
},
durationChange(e) {
this.setData({
duration: e.detail.value
})
},
// 关闭菜单
menuClose(){
this.data.menuIsShow&&this.setData({
menuIsShow: !this.data.menuIsShow
})
},
menuSwitch(){
this.setData({
menuIsShow: !this.data.menuIsShow
})
},
// 导航的按钮
clickBottomBtn(e){
const label=e.currentTarget.dataset.label||'front'
console.log('click',label)
this.setData({
bottomBtn:label
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('进入home页面' ,12431243)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {
"home-content": "/pages/homeContent/homeContent",
"blog": "/pages/blog/blog",
"life": "/pages/life/life",
"future": "/pages/future/future"
}
}
\ No newline at end of file
<!--pages/home/home.wxml-->
<view class="container">
<view class="container-menu-expand" wx:if="{{!menuIsShow}}">
<view class="arrow-left" bindtap="menuSwitch"></view>
</view>
<view class="container-menu-mask" wx:if="{{menuIsShow}}"></view>
<view class="container-menu" wx:if="{{menuIsShow}}">
<view class="arrow-right" bindtap="menuSwitch"></view>
<view class="btn-ul">
<text>这是菜单</text></view>
</view>
<view class="caontainer-header" wx:if="{{bottomBtn==='front'}}">
<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{ autoplay }}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item.class}}">
{{item.content}}
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="container-content">
倒计时 {{content}}
<home-content class='home-content-class' headerItem='{{content}}' wx:if="{{bottomBtn==='front'}}"></home-content>
<blog class='home-content-class' wx:if="{{bottomBtn==='blog'}}"></blog>
<future class='home-content-class' wx:if="{{bottomBtn==='target'}}"></future>
<life class='home-content-class' wx:if="{{bottomBtn==='life'}}"></life>
</view>
<view class="container-footer">
<view class="container-footer-btn-menu">
<view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>前端</view>
<view class="default-btn active {{bottomBtn==='blog'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='blog'>博客</view>
<view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>方向</view>
<view class="default-btn active {{bottomBtn==='life'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='life'>生活</view>
</view>
</view>
</view>
\ No newline at end of file
/* pages/home/home.wxss */
page {
position: absolute;
width: 100vw;
height: 100vh;
bottom: 0;
overflow: hidden;
}
.container{
position: relative;
width: 100%;
height:100%;
background: rgb(255, 255, 255);
}
/* 箭头 //上右边下左 */
.arrow-left{
width: 0;
height: 0;
border: 20px solid;
border-color: transparent transparent transparent rgb(255,255,255);
position: relative;
cursor: pointer;
}
.arrow-left::after{
content: '';
position: absolute;
top: -20px;
left: -23px;
border: 20px solid;
border-color: transparent transparent transparent rgb(0, 183, 255);
}
.arrow-right{
float: right;
width: 0;
height: 0;
border: 20px solid;
border-color: transparent rgb(255,255,255) transparent transparent;
position: relative;
cursor: pointer;
}
.arrow-right::after{
content: '';
position: absolute;
top: -20px;
right: -23px;
border: 20px solid;
border-color: transparent rgb(0, 183, 255) transparent transparent;
}
/* 左侧的菜单 */
.container-menu{
position: absolute;
left: 0;
z-index: 1;
width:30%;
font-size: 12px;
height:100%;
background-color: rgba(0, 0, 0,.8);
overflow: hidden;
}
.btn-ul{
position: relative;
margin-top:40px;
margin-left:10px;
}
/* mask */
.container-menu-mask{
position: absolute;
right: 0;
z-index: 1;
width:70%;
height:100%;
background-color: rgba(0, 0, 0,.5);
overflow: hidden;
}
.container-menu-expand{
position: absolute;
left: 0;
z-index: 1;
}
.caontainer-header{
height:150px;
display: flex;
}
/* 嵌入表头图案 */
.swiper{
position: relative;
height:150px;
width: 100vw;
background-color: rgb(49, 28, 3);
}
.swiper-item{
position: relative;
width: 100%;
text-align: center;
line-height: 150px;
height: 100%;
}
.header-swiper-one{
background-color: rgba(158, 209, 238,.4);
}
.header-swiper-two{
background-color: rgba(158, 209, 238,.5);
}
.header-swiper-three{
background-color: rgba(158, 209, 238, 0.6);
}
.caontainer-header content-title{
text-align: center;
}
.container-content{
position: relative;
height: 50vh;
}
.home-content-class{
position: relative;
width: 100%;
height:100%;
}
.container-footer{
position: absolute;
width:100vw;
bottom: 0;
left:0;
right:0;
padding: 0;
}
.container-footer-btn-menu{
position: relative;
display: flex;
flex-wrap: nowrap;
width:100vw;
bottom:0;
}
.default-btn{
position: relative;
width:25%;
border:1px solid antiquewhite;
text-align: center;
height:100%;
}
.default-btn:active{
background-color: rgb(8, 113, 252);
}
.btn-actived{
background-color: rgb(8, 113, 252);
}
\ No newline at end of file
// pages/homeContent/homeContent.js
Page({
// prop
properties: {
headerItem:String
},
// observers: {
// headerItem: function(newVal,oldVal) {
// console.log('change',newVal,oldVal)
// this.setData({
// homeHeaderItem: newVal
// });
// }
// },
/**
* 页面的初始数据
*/
data: {
content:'子组件的content',
homeHeaderItem:''
},
observers:{
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('进入homePage home-content 渲染开始 onload')
console.log('传递的header-item',options,this)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('进入homePage home-content 渲染开始 onready')
console.log('传递的header-item',this)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {
}
}
\ No newline at end of file
<!--pages/homeContent/homeContent.wxml-->
<!-- <text>pages/homeContent/homeContent.wxml</text> -->
<view class="container">
<text>content内容</text>
{{headerItem}}
{{content + headerItem}}
<!-- <web-view src="https://yongma16.xyz/" /> -->
</view>
/* pages/homeContent/homeContent.wxss */
.container{
position: relative;
width: 100%;
height:100%;
background: #262626;
overflow: hidden;
}
// index.js
// const app = getApp()
const { envList } = require('../../envList.js');
// 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: '不限语言的全托管容器服务',
showItem: false,
item: [{
title: '部署服务',
page: 'deployService'
}]
}],
envList,
selectedEnv: envList[0],
haveCreateCollection: false
title: "alpha测试阶段",
userImageUrl: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
loginTitle: "授权",
userName: '未授权用户',
userInfo: {},
hasUserInfo: false
},
onClickPowerInfo(e) {
const index = e.currentTarget.dataset.index;
const powerList = this.data.powerList;
powerList[index].showItem = !powerList[index].showItem;
if (powerList[index].title === '数据库' && !this.data.haveCreateCollection) {
this.onClickDatabase(powerList);
} else {
getUserInfoBtn: function (info) {fgetUserProfile
wx.showLoading({
title: '授权中',
});
console.log('userinfo', info)
if (info && info.detail) {
const rowData = info.detail.rawData ? JSON.parse(info.detail.rawData) : { nickName: '未授权用户', avatarUrl: '' }
this.setData({
userImageUrl: rowData.avatarUrl
})
this.setData({
powerList
});
userName: rowData.nickName
})
console.log('rowData', rowData)
}
wx.hideLoading();
},
onChangeShowEnvChoose() {
wx.showActionSheet({
itemList: this.data.envList.map(i => i.alias),
getUserProfile(e) {
// 推荐使用 wx.getUserProfile 获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
this.onChangeSelectedEnv(res.tapIndex);
},
fail (res) {
console.log(res.errMsg);
console.log('信息',res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
// 全局变量
try {
wx.setStorageSync('currentUserInfo', JSON.stringify(this.userInfo))
} catch (e) {
console.warn('获取用户信息报错',this.userInfo)
}
// 跳转到home
this.jumpTohome()
}
});
},
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) {
// 跳转到home
jumpTohome: function () {
console.log('跳转到home')
console.log('this.pageRouter',this.pageRouter)
wx.navigateTo({
url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,
});
url: '/pages/home/home'
})
},
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
});
onLoad: function (options) {
console.log('this page', this)
console.log('this.pageRouter',this.pageRouter)
this.jumpTohome()
// 页面创建时执行
},
onShow: function () {
// 页面出现在前台时执行
},
onReady: function () {
// 页面首次渲染完毕时执行
},
onHide: function () {
// 页面从前台变为后台时执行
},
onUnload: function () {
// 页面销毁时执行
},
onPullDownRefresh: function () {
// 触发下拉刷新时执行
},
onReachBottom: function () {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function () {
// 页面滚动时执行
},
onResize: function () {
// 页面尺寸变化时执行
},
userLogin: function () {
wx.login({
success(res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
this.setData({
powerList
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
})
}
});
<!--index.wxml-->
<!--
<view class="container">
<view class="title">快速了解云开发</view>
......@@ -29,4 +29,17 @@
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
</view> -->
<view class="container">
<view class="title">{{title}}</view>
<view class="user-image-box">
<view class="user-nick-name">{{userName}}</view>
<image class="user-image" src="{{userImageUrl}}"></image>
</view>
<view class="user-info">
</view>
<button type="primary" plain="true" bindtap="getUserProfile" class="user-login" bindgetuserinfo="getUserInfoBtn">{{loginTitle}}</button>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
\ No newline at end of file
......@@ -2,14 +2,47 @@
page {
padding-top: 54rpx;
background-color: #f6f6f6;
background: #076585;
color: #fff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #fff, #076585);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #fff, #076585);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-bottom: 60rpx;
}
.user-login {
width: 100px !important;
color: #fff !important;
border-color: #fff !important;
}
.user-info {
color: #fff;
}
.user-nick-name {
height: 30px;
}
.user-image-box {
width: 200px;
height: 140px;
text-align: center;
align-items: center;
}
.user-image {
width: 100px;
height: 100px;
border-radius: 50%;
}
.title {
font-family: PingFang SC;
font-weight: 500;
color: #000000;
font-size: 44rpx;
margin-bottom: 40rpx;
}
......
// pages/life/life.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<!--pages/life/life.wxml-->
<text>pages/life/life.wxml</text>
/* pages/life/life.wxss */
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
},
getRecord() {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'selectRecord'
}
}).then((resp) => {
this.setData({
haveGetRecord: true,
record: resp.result.data
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
clearRecord() {
this.setData({
haveGetRecord: false,
record: ''
});
}
});
{
"navigationBarTitleText": "查询记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">体验查询记录能力,查询数据表中的销量数据。</view>
<view class="box_text" wx:if="{{!record}}">销量数据将展示在这里</view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<view class="code_box_record_detail">{{item.sales}}</view>
</view>
</view>
<view class="button" bindtap="getRecord" wx:if="{{!haveGetRecord}}">查询记录</view>
<view class="button_clear" bindtap="clearRecord" wx:if="{{haveGetRecord}}">清空</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>selectRecord>index.js“找到查询记录函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx;
}
.code_box_title {
color: rgba(0, 0, 0, 0.5);
font-size: 26rpx;
margin-bottom: 20rpx;
text-align: left;
}
.code_box_record {
display: flex;
}
.code_box_record_title {
width: 33%;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
padding: 20rpx 0;
}
.code_box_record_detail {
width: 33%;
font-size: 26rpx;
padding: 20rpx 0;
}
.button {
width: 300rpx;
text-align: center;
margin: 20% auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
.line {
height: 1rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'selectRecord'
}
}).then((resp) => {
this.setData({
record: resp.result.data
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
sumRecord() {
wx.navigateTo({
url: `/pages/sumRecordResult/index?envId=${this.data.envId}`,
});
},
});
{
"navigationBarTitleText": "聚合记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">常用数据库中的groupby操作,体验按地域聚合数据。</view>
<view class="box_text" wx:if="{{!record}}">数据将展示在这里</view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<view class="code_box_record_detail">{{item.sales}}</view>
</view>
</view>
<view class="button" bindtap="sumRecord">聚合记录</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>sumRecord>index.js“找到聚合记录函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx;
}
.code_box_title {
color: rgba(0, 0, 0, 0.5);
font-size: 26rpx;
margin-bottom: 20rpx;
text-align: left;
}
.code_box_record {
display: flex;
}
.code_box_record_title {
width: 33%;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
padding: 20rpx 0;
}
.code_box_record_detail {
width: 33%;
font-size: 26rpx;
padding: 20rpx 0;
}
.button {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
.line {
height: 1rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'sumRecord'
}
}).then((resp) => {
this.setData({
record: resp.result.list
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
goBack() {
wx.navigateBack();
},
});
{
"navigationBarTitleText": "聚合记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">常用数据库中的groupby操作,体验按地域聚合数据。</view>
<view class="box_text" wx:if="{{!record}}">数据将展示在这里</view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item._id}}</view>
<view class="code_box_record_detail">{{item.sum}}</view>
</view>
</view>
<view class="button" bindtap="goBack">返回上一步</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>sumRecord>index.js“找到聚合记录函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx;
}
.code_box_title {
color: rgba(0, 0, 0, 0.5);
font-size: 26rpx;
margin-bottom: 20rpx;
text-align: left;
}
.code_box_record {
display: flex;
justify-content: space-between;
}
.code_box_record_title {
width: 33%;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
padding: 20rpx 0;
}
.code_box_record_detail {
width: 33%;
font-size: 26rpx;
padding: 20rpx 0;
}
.button {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
.line {
height: 1rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
},
onShow() {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'selectRecord'
}
}).then((resp) => {
this.setData({
record: resp.result.data
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
updateRecord() {
wx.navigateTo({
url: `/pages/updateRecordResult/index?envId=${this.data.envId}`,
});
},
});
{
"navigationBarTitleText": "更新记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">体验更新字段记录能力,更新数据表中的销量数据。</view>
<view class="box_text" wx:if="{{!record}}">数据将展示在这里</view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<view class="code_box_record_detail">{{item.sales}}</view>
</view>
</view>
<view class="button" bindtap="updateRecord">修改数据</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>updateRecord>index.js“找到查询记录函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx;
}
.code_box_title {
color: rgba(0, 0, 0, 0.5);
font-size: 26rpx;
margin-bottom: 20rpx;
text-align: left;
}
.code_box_record {
display: flex;
}
.code_box_record_title {
width: 33%;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
padding: 20rpx 0;
}
.code_box_record_detail {
width: 33%;
font-size: 26rpx;
padding: 20rpx 0;
}
.button {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
.line {
height: 1rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'selectRecord'
}
}).then((resp) => {
this.setData({
record: resp.result.data
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
updateRecord() {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'updateRecord',
data: this.data.record
}
}).then((resp) => {
wx.navigateTo({
url: `/pages/updateRecordSuccess/index`,
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
},
bindInput (e) {
const index = e.currentTarget.dataset.index;
const record = this.data.record;
record[index].sales = Number(e.detail.value);
this.setData({
record
});
},
});
{
"navigationBarTitleText": "更新记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">体验更新字段记录能力,更新数据表中的销量数据。</view>
<view class="box_text" wx:if="{{!record}}">数据将展示在这里</view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<input class="code_box_record_detail" bindinput="bindInput" data-index="{{index}}" value="{{item.sales}}" type="number"></input>
</view>
</view>
<view class="button" bindtap="updateRecord">更新</view>
<view class="tip">在”资源管理器>cloudfunctions>quickstartFunctions>updateRecord>index.js“找到查询记录函数,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 17rpx;
}
.code_box_title {
color: rgba(0, 0, 0, 0.5);
font-size: 26rpx;
margin-bottom: 20rpx;
text-align: left;
}
.code_box_record {
display: flex;
}
.code_box_record_title {
width: 33%;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.5);
padding: 20rpx 0;
}
.code_box_record_detail {
width: 33%;
font-size: 26rpx;
padding: 20rpx 0;
}
.button {
width: 300rpx;
text-align: center;
margin: 250rpx auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.line {
height: 1rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
Page({
/**
* 页面的初始数据
*/
data: {
},
goBack() {
wx.navigateBack({
delta: 2
});
},
});
{
"navigationBarTitleText": "更新记录",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<icon class="icon-box-img icon" type="success" size="53"></icon>
<view class="title">地区销量统计更新成功</view>
<view class="info">可在“云开发控制台>数据库>记录列表”中进行查看</view>
<view class="button" bindtap="goBack">我知道了</view>
</view>
page {
text-align: center;
}
.icon {
margin: 80rpx 0 50rpx 0;
}
.title {
font-size: 42rpx;
font-weight: 600;
margin-bottom: 30rpx;
}
.info {
font-size: 36rpx;
width: 90%;
margin: 0 auto;
}
.button {
width: 300rpx;
text-align: center;
margin: 550rpx auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
showUploadTip: false,
haveGetImgSrc: false,
envId: '',
imgSrc: ''
},
onLoad(options) {
this.setData({
envId: options.envId
});
},
uploadImg() {
wx.showLoading({
title: '',
});
// 让用户选择一张图片
wx.chooseImage({
count: 1,
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
config: {
env: this.data.envId
}
}).then(res => {
console.log('上传成功', res);
this.setData({
haveGetImgSrc: true,
imgSrc: res.fileID
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
wx.hideLoading();
});
},
});
},
clearImgSrc() {
this.setData({
haveGetImgSrc: false,
imgSrc: ''
});
}
});
{
"navigationBarTitleText": "上传文件",
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
\ No newline at end of file
<view>
<view class="top_tip">多存储类型,仅需一个云函数即可完成上传。</view>
<view class="box_text" wx:if="{{!imgSrc}}">上传的图片将展示在这里</view>
<view wx:if="{{imgSrc}}" class="code_box">
<image class="code_img" src="{{imgSrc}}"></image>
<view class="img_info">
<view class="img_info_title">文件路径</view>
<view class="img_info_detail">{{imgSrc}}</view>
</view>
</view>
<view class="button" bindtap="uploadImg" wx:if="{{!haveGetImgSrc}}">上传一张图片</view>
<view class="button_clear" bindtap="clearImgSrc" wx:if="{{haveGetImgSrc}}">清空</view>
<view class="tip">在“资源管理器>miniprogram>pages>uploadFile>index.js”找到相应代码,体验该能力</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
.tip {
font-size: 23rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: center;
margin: 30rpx auto 0 auto;
}
.top_tip {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
width: 90%;
text-align: left;
margin-top: 30rpx;
margin-left: 20rpx;
}
.box_text {
background-color: white;
text-align: center;
padding: 300rpx 0;
margin-top: 30rpx;
color: rgba(0, 0, 0, 0.5);
}
.code_box {
text-align: center;
background-color: white;
margin-top: 30rpx;
padding: 50rpx 0 17px 0;
}
.code_img {
width: 300rpx;
height: 300rpx;
}
.button {
width: 300rpx;
text-align: center;
margin: 20% auto 0 auto;
height: 80rpx;
color: white;
border-radius: 5px;
line-height: 80rpx;
background-color: #07c160;
}
.button_clear {
width: 300rpx;
text-align: center;
margin: 20% auto 0 auto;
height: 80rpx;
color: #07c160;
border-radius: 5px;
line-height: 80rpx;
background-color: rgba(0, 0, 0, 0.03);
}
.img_info {
padding-top: 16px;
width: 90%;
margin: 0 auto;
display: flex;
padding: 16rpx 0;
border-top: 0.5px solid #E5E5E5;
margin-top: 50rpx;
}
.img_info_title {
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
color: #888888;
width: 72px;
margin-right: 32px;
}
.img_info_detail {
text-align: left;
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
width: 500rpx;
}
towxml @ 974be3cd
Subproject commit 974be3cdbad40b379acd2940966fea2bcbfacd2d
......@@ -18,7 +18,7 @@
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"compileHotReLoad": true,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
......@@ -35,9 +35,9 @@
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"minifyWXML": true
"useCompilerPlugins": false
},
"appid": "wx373f33f993c688d1",
"projectname": "yma16_program",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册