推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：519
-
2020-05-08 浏览：506
-
2020-04-04 浏览：502
-
2020-05-12 浏览：496
用Baas在腾讯云上开发小程序-系列4：实现客户侧商品列表、商品详情页程序 .
发布时间:2020-12-05一、实验简介
通过实现商品列表、商品详情页程序，熟练掌握云端数据表查询操作。
二、实验目标
掌握小程序调试方法
掌握小程序操作云端数据方法
掌握云端数据表增删改查操作
三、实验步骤
3.1 Hello World
应用设置
第一步: 修改 app.js ，初始化全局对象
App({
onLaunch: function () {
// 创建 xpm 对象
this.xpm = require('xpmjs/xpm.js').option({
'host':'wss.appcook.cn',
'https':'wss.appcook.cn',
'wss': 'wss.appcook.cn/ws-server',
'table.prefix': 'hello',
'user.table':'user'
});
12.
// 创建全局对象 this.wss = this.xpm.require('wss'); // 信道
this.session = this.xpm.require('session'); // 会话
this.stor = this.xpm.require('stor'); // 存储17. this.utils = this.xpm.require('utils'); // 工具
this.user = this.xpm.require('user'); // 用户19. },
xpm:null,
user:null,
utils:null,
session:null,
stor:null,
wss:null
})
第二步: 修改 app.json 添加页面清单，修改标题栏默认属性
1. { 2. "pages":[ 3. "pages/index/index" 4. ], 5. "window":{ 6. "backgroundTextStyle":"light", 7. "navigationBarBackgroundColor": "#ffffff", 8. "navigationBarTitleText": "Hello World", 9. "navigationBarTextStyle":"black" 10. } 11. }第三步: 修改 app.wxss 设定全局样式
1. .container { 2. height: 100%; 3. display: flex; 4. flex-direction: column; 5. align-items: center; 6. justify-content: space-between; 7. padding: 100rpx 0; 8. box-sizing: border-box; 9. }2. 用户登录
第一步: 修改 pages/index/index.js 用户登录代码
第二步: 修改 pages/index/index.wxml 更新页面布局
> 1. <view class="container"> > 2. <view bindtap="bindViewTap" class="userinfo"> > 3. <image class="userinfo-avatar" src=http://www.yiyongtong.com/archives/"{{userInfo.avatarUrl}}" backgro und-size="cover"></image> > 4. <text class="userinfo-nickname">{{userInfo.nickName}}</text> > 5. </view> > 6. <view class="usermotto"> > 7. <text class="user-motto">{{hello}}</text> > 8. </view> > 9. </view>第三步: 修改 pages/index/index.wxss 微调页面样式
1. .userinfo { 2. display: flex; 3. flex-direction: column; 4. align-items: center; 5. } 6. 7. .userinfo-avatar { 8. width: 128rpx; 9. height: 128rpx; 10. margin: 20rpx; 11. border-radius: 50%; 12. } 13. 14. .userinfo-nickname { 15. color: #aaa; 16. } 17. 18. .usermotto { 19. margin-top: 120px; 20. }第五步: 修改 pages/index/index.json 设置页面名称
1. { 2. "navigationBarTitleText": "用户登录效果预览: 通过微信开发者工具，通过模拟器可以实时预览效果
3.2 商品列表页
1. 全局样式表
在小程序中有两种方式使用全局样式。在 app.wxss中定义的样式为全局样式；也可以通过
@import "common.wxss"; 方法引用样式表文件。为了便于修改前台样式，我们定义一个通用的样式文件 pages/wxss/style.wxss 。
创建 pages/store/wxss/style.wxss 前台通用样式文件； 下为代码片段，完成代码参见源码。
2. 购物车布局
因为有多个页面，用到了购物车底栏； 所以将购物车布局代码抽离成独立文件使用
标签引入。
创建购物车 pages/store/common/cart.wxml 代码文件。
