用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

用Baas在腾讯云上开发小程序-系列4:实现客户侧商品列表、商品详情页程序 ... ...

纸飞机 2018-3-8 09:37

一、实验简介通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作。二、实验目标掌握调试方法掌握小程序操作云端数据方法掌握云端数据表增删改查操作三、实验步骤3.1 Hello World应用设置第一步: 修改 ap ...

一、实验简介
通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作。

二、实验目标

  1. 掌握调试方法
  2. 掌握小程序操作云端数据方法
  3. 掌握云端数据表增删改查操作

三、实验步骤
3.1 Hello World

  1. 应用设置
    第一步: 修改 app.js ,初始化全局对象

    1. App({
    2. onLaunch: function () {
    3. // 创建 xpm 对象
    4. this.xpm = require('xpmjs/xpm.js').option({
    5. 'host':'wss.appcook.cn',
    6. 'https':'wss.appcook.cn',
    7. 'wss': 'wss.appcook.cn/ws-server',
    8. 'table.prefix': 'hello',
    9. 'user.table':'user'
    10. });
      12.
    11. // 创建全局对象 this.wss = this.xpm.require('wss'); // 信道
    12. this.session = this.xpm.require('session'); // 会话
    13. this.stor = this.xpm.require('stor'); // 存储17. this.utils = this.xpm.require('utils'); // 工具
    14. this.user = this.xpm.require('user'); // 用户19. },
    15. xpm:null,
    16. user:null,
    17. utils:null,
    18. session:null,
    19. stor:null,
    20. wss:null
    21. })

第二步: 修改 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 用户登录代码

1. var app = getApp();
2. Page({
3. data: {
4. hello: 'hello world',
5. userInfo: {
6. avatarUrl:'http://of2is3ok3.bkt.clouddn.com/nopic.gif',
7. nickName:'载入中..'
8. }
9. },
10. onLoad: function () {
11. var that = this;
12. app.user.login().then(function( uinfo ){
13. that.setData({userInfo:uinfo});
14. });
15. }
16. });

第二步: 修改 pages/index/index.wxml 更新页面布局

> 1. class="container">
> 2. "bindViewTap" class="userinfo">
> 3. class="userinfo-avatar" src="{{userInfo.avatarUrl}}" backgro und-size="cover">
> 4. class="userinfo-nickname">{{userInfo.nickName}}
> 5. 
> 6. class="usermotto">
> 7. class="user-motto">{{hello}}
> 8. 
> 9. 

第三步: 修改 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 前台通用样式文件; 下为代码片段,完成代码参见源码。

1. view {
2. color:#232323;
3. font-size:32rpx;
4. }
5.
6. button[type="primary"][plain] {
7. border: 1px solid #81c7d1;
8. color: #81c7d1;
9. }
10.
11. button[type="primary"] {
12. color:#FFFFFF;
13. background-color:#81c7d1;
14. }
15.
16. .topbar{
17. background: #f5f5f5;
18. line-height: 64rpx;
19. position: fixed;
20. width: 100%;
21. z-index: 1000;
22. border-bottom: 2rpx solid #e1e1e1;
23. }
24. ...

2. 购物车布局
因为有多个页面,用到了购物车底栏; 所以将购物车布局代码抽离成独立文件使用

标签引入。
创建购物车 pages/store/common/cart.wxml 代码文件。

1. <view class="bottombar view-row">
2. <view style="width:88rpx;">
3. <image mode="widthFix" src="/res/icons/shop.png">image>
4. view>
5. <view style="width:40%">
6. <text style="padding-left:20rpx;"> {{cart.total}} 件商品 {{cart.show
_price}} 元 text>
7. view>
8. <view class="text-right" style="width:50%">
9.
10. <button
11. class="push-t-10 push-r-10"
12. type="default" size="mini" loading="{{loading}}"
13. disabled="{{disabled}}"
14. bindtap="cleanup"> 清空 button>
15. <button
16. class="push-t-10 push-r-10"
17. type="warn" size="mini" loading="{{loading}}"
18. disabled="{{disabled}}"
19. data-link="{{order}}" bindtap="payout"> 结算 button>
20. 
                
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏