[关闭]
@langlibaitiao 2017-07-06T14:24:57.000000Z 字数 15643 阅读 1013

微信小程序（demo）

小程序

一 获取小程序的AppId

1 注册微信公众平台账号，登录：https://mp.weixin.qq.com，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 。

注意：如果要以非管理员微信号在手机上体验该小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本文档默认注册帐号、体验都是使用管理员微信号。

二 微信开发者工具

1 我们需要通过开发者工具，来完成小程序创建和代码编辑。开发者工具集成了开发调试、代码编辑及程序发布等功能。

链接：开发者工具下载地址

三 创建项目

1 开发者工具安装完成后:

(1) 打开并使用微信扫码登录，
(2) 选择创建“项目”，填入上文获取到的AppID，
(3) 设置一个本地项目的名称（非小程序名称），比如“小程序demo”，并选择一个本地的文件夹作为代码存储的目录，
(4) 点击“新建项目”就可以了。

2 在创建过程中:

如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start  项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。其中初始化了文件结构并包含了一些简单的文件。

3 项目创建成功后:

我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

四 小程序文件目录结构介绍

1 小程序文件格式介绍

在项目中我们可以看到四种文件类型：

(1) .js后缀的文件是脚本文件，页面的交互等代码在这里实现；
(2) .json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序的配置效果；
(3) .wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化；
(4) .wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。

2 pages目录介绍

1 该文件主要存放小程序的页面文件

2 注意：
(1) 小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。
(2) 文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

3 utils目录介绍

(1) 该文件夹主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

(2) 对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用一下代码引入

  1. function formatTime(date) {
  2.   var year = date.getFullYear()
  3.   var month = date.getMonth() + 1
  4.   var day = date.getDate()
  6.   var hour = date.getHours()
  7.   var minute = date.getMinutes()
  8.   var second = date.getSeconds()
  11.   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  12. }
  14. function formatNumber(n) {
  15.   n = n.toString()
  16.   return n[1] ? n : '0' + n
  17. }
  18. //发送请求 post方式
  19. var rootDocment = 'https://api.orangelife.com.cn/'; //正式
  20. // var rootDocment = 'http://eastapi.swao.cn/'; //测试
  21. function req(url, data, cb) {
  22.   wx.request({
  23.     url: rootDocment + url,
  24.     data: data,
  25.     method: 'POST',
  26.     header: { 'Content-Type': 'application/json' },  
  27.     success: function (res) {
  28.       console.log(res)
  29.       return typeof cb == "function" && cb(res.data)
  30.     },
  31.     fail: function () {
  32.       return typeof cb == "function" && cb(false)
  33.     }
  34.   })
  35. }  
  36. //发送请求 get方式
  37. function getReq(url, data, cb) {
  38.   wx.request({
  39.     url: rootDocment + url,
  40.     data: data,
  41.     method: 'GET',
  42.     header: { 'Content-Type': 'application/x-www-form-urlencoded' },
  43.     success: function (res) {
  44.       return typeof cb == "function" && cb(res.data)
  45.     },
  46.     fail: function () {
  47.       return typeof cb == "function" && cb(false)
  48.     }
  49.   })
  50. }
  52. // 去前后空格  
  53. function trim(str) {
  54.   return str.replace(/(^\s*)|(\s*$)/g, "");
  55. }
  57. // 提示错误信息  
  58. function isError(msg, that) {
  59.   that.setData({
  60.     showTopTips: true,
  61.     errorMsg: msg
  62.   })
  63. }
  65. // 清空错误信息  
  66. function clearError(that) {
  67.   that.setData({
  68.     showTopTips: false,
  69.     errorMsg: ""
  70.   })
  71. }  
  73. //上传文件  
  74. function uploadFile(url, filePath, name, formData, cb) {
  75.   console.log('a=' + filePath, formData)
  76.   wx.uploadFile({
  77.     url: rootDocment + url,
  78.     filePath: filePath,
  79.     name: name,
  80.     header: {
  81.       'content-type': 'multipart/form-data'
  82.     }, // 设置请求的 header  
  83.     formData: formData, // HTTP 请求中其他额外的 form data  
  84.     success: function (res) {
  85.       console.log(res)
  86.       console.log(res.head_image)
  87.       if (res.statusCode == 200 && !res.data.result_code) {
  88.         return typeof cb == "function" && cb(res.head_image)
  89.       } else {
  90.         return typeof cb == "function" && cb(false)
  91.       }
  92.     },
  93.     fail: function () {
  94.       return typeof cb == "function" && cb(false)
  95.     }
  96.   })
  97. } 
  98. //用module.exports对外暴露接口
  99. module.exports = {
  100.   formatTime: formatTime,
  101.   req: req,
  102.   getReq: getReq,
  103.   trim: trim,
  104.   isError: isError,
  105.   clearError: clearError,
  106.   uploadFile: uploadFile
  107. }
  1. //在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
  2. var util = require('../../utils/util.js')

4 app.js、app.json、app.wxss

4.1 app.js :

1 小程序的脚本代码
我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，想了解更多可用 API，可参考 [API文档]

2 小程序注册
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     //调用API从本地缓存中获取数据
  5.     var logs = wx.getStorageSync('logs') || []
  6.     logs.unshift(Date.now())
  7.     wx.setStorageSync('logs', logs)
  8.   },
  9.   getUserInfo:function(cb){
  10.     var that = this
  11.     if(this.globalData.userInfo){
  12.       typeof cb == "function" && cb(this.globalData.userInfo)
  13.     }else{
  14.       //调用登录接口
  15.       wx.login({
  16.         success: function () {
  17.           wx.getUserInfo({
  18.             success: function (res) {
  19.               that.globalData.userInfo = res.userInfo
  20.               typeof cb == "function" && cb(that.globalData.userInfo)
  21.             }
  22.           })
  23.         }
  24.       })
  25.     }
  26.   },
  27.   //全局参数，可以在其他页面通过接口获取到，全局使用的参数可以在这里进行声明
  28.   globalData:{
  29.     userInfo:null 
  30.   }
  31. })
  1. //全局参数可以在其他页面通过下面方法获取到
  2.     var app = getApp();
  3.     console.log(app. globalData);

4.2 app.json :
是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考[配置详解]

部分配置解释：

(1) 此处tabBar下的list为底部列表栏配置；注意：tabBar如果设置，最少要两个，最多不能超过五个。
(2) networkTimeout和debug可以设置各种网络请求的超时时间
(3) debug：可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调用信息以info的形式给出，其信息有page注册、页面路由、数据更新和时间触发，可以帮开发者快速定位一些常见信息。

  1. /**app.json**/
  2.     {
  3.   "pages": [
  4.     "pages/index/index",
  5.     "pages/mall/list/list",
  6.     "pages/login/login",
  7.     "pages/user/user",
  8.     "pages/mall/detail/detail",
  9.     "pages/location/location"
  10.   ],
  11.   "window": {
  12.     "backgroundTextStyle": "light",
  13.     "navigationBarBackgroundColor": "pink",
  14.     "navigationBarTitleText": "智橙生活",
  15.     "navigationBarTextStyle": "black"
  16.   },
  17.   "tabBar": {
  18.     "list": [
  19.       {
  20.         "pagePath": "pages/index/index",
  21.         "text": "首页",
  22.         "iconPath": "images/tabBar/index.png",
  23.         "selectedIconPath": "images/tabBar/index-select.png"
  24.       },
  25.       {
  26.         "pagePath": "pages/mall/list/list",
  27.         "text": "商城",
  28.         "iconPath": "images/tabBar/market.png",
  29.         "selectedIconPath": "images/tabBar/market-select.png"
  30.       },
  31.       {
  32.         "pagePath": "pages/user/user",
  33.         "text": "个人中心",
  34.         "iconPath": "images/tabBar/setting.png",
  35.         "selectedIconPath": "images/tabBar/setting-select.png"
  36.       }
  37.     ],
  38.     "color": "#000",
  39.     "backgroundColor": "pink",
  40.     "selectedColor": "#f60",
  41.     "borderStyle": "#ccc"
  42.   },
  43.   "networkTimeout": {
  44.     "request": 20000,
  45.     "connectSocket": 20000,
  46.     "uploadFile": 20000,
  47.     "downloadFile": 20000
  48.   },
  49.   "debug": true
  50. }

4.3 app.wxss :
全局的界面美化代码

  1. /**app.wxss**/
  2. @import "dist/style/weui.wxss"; 
  3. .container {
  4.   height: 100%;
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8.   justify-content: space-between;
  9.   padding: 200rpx 0;
  10.   box-sizing: border-box;
  11. }

5 页面注册.js

1 注册一个页面

  1. // detail.js
  2. var app = getApp();
  3. var util = require('../../../utils/util.js');
  4. Page({//页面数据配置
  5.   data: {
  6.     msgDetail: {},
  7.     imgUrls:[],
  8.     autoplay: true,
  9.     indicatorDots: true,
  10.     interval: 4000,
  11.     duration: 1000
  12.   },
  13.   onLoad: function (options) {
  14.     console.log(options)
  15.     var that = this;
  16.     util.req('mall/getItemDetailV4', {//请求接口
  17.       // id: options.id
  18.       itemId: options.itemId,
  19.       activityId: options.activityId
  20.     }, function (res) {
  21.       that.setData({// 改变信息
  22.         msgDetail: res.data.itemDetail,
  23.         imgUrls: res.data.itemDetail.pics
  24.       })
  25.     });
  26.   },
  27.   onReady: function () {
  28.     // 页面渲染完成  
  29.   },
  30.   onShow: function () {
  31.     // 页面显示  
  32.   },
  33.   onHide: function () {
  34.     // 页面隐藏  
  35.   },
  36.   onUnload: function () {
  37.     // 页面关闭  
  38.   }
  39. })  
Page({})，注册一个页面，中间的代码为声明周期函数，可以不实现，但是Page({})结构必须创建。

注意：只有在data中声明的数据才能够正常使用

五 本demo中的一些方法与属性

1 响应的数据绑定

整个系统分为两块视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

index.wxml文件下：

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view  bindtap="bindViewTap" class="userinfo">
  4.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  5.     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  6.   </view>
  7.   <view class="usermotto">
  8.     <text class="user-motto">{{motto}}</text>
  9.   </view>
  10.   <button bindtap="changeName">{{clickData}}</button>
  11. </view>

index.js文件如下：

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     motto: '综合服务生活平台',
  7.     clickData: '点我试试',
  8.     userInfo: {}
  9.   },
  10.   changeName: function (e) {
  11.     this.setData({
  12.       motto: "智橙生活",
  13.       clickData: '试试就试试',
  14.     })
  15.   },
  16.   onLoad: function () {
  17.     var that = this
  18.     //调用应用实例的方法获取全局数据
  19.     app.getUserInfo(function(userInfo){
  20.       //更新数据
  21.       that.setData({
  22.         userInfo:userInfo
  23.       })
  24.     })
  25.   }
  26. })

2 商品列表页面代码

(1) 上拉加载，下拉刷新, 分页

  1.       // 下拉刷新数据  
  2.   pullDownRefresh: function () {
  3.     var that = this;
  4.     pageNum = 0;
  5.     //tab0
  6.     var objBuy0 = that.data.isBuying;
  7.     objBuy0.msgList = [];
  8.     //tab1
  9.     var objBuy1 = that.data.isBuying;
  10.     objBuy1.msgList = [];
  11.     that.setData({
  12.       isBuying: objBuy0,
  13.       futureBuying: objBuy1,
  14.       scrollTop: 0
  15.     });
  16.     loadMsgData0(that);
  17.   },
  19.   // 上拉加载数据 
  20.   pullUpLoad: function () {
  21.     var that = this;
  22.     if (!that.data.isLastPage) {
  23.       loadMsgData0(that);
  24.     }
  25.   },
(2) 页面跳转

  1. 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>

pages/mall/list/list.js

  3. var util = require('../../../utils/util.js');
  4. var app = getApp();
  5. // 加载数据  
  6. var loadMsgData0 = function (that) {
  7.   //初始化隐藏列表
  8.   var objBuy0 = that.data.isBuying;
  9.   objBuy0.hidden = false;
  10.   that.setData({
  11.     isBuying: objBuy0
  12.   });
  13.   var allMsg = objBuy0.msgList;
  14.   util.req('mall/getPanicBuyItemList', {
  15.     "index": objBuy0.pageNum,
  16.     "size": objBuy0.pageSize,
  17.     "flag": "current"
  18.   }, function (res) {
  19.     //生成新的商品信息数组
  20.     allMsg = allMsg.concat(res.page.content);
  21.     objBuy0.hidden = true,
  22.     objBuy0.msgList = allMsg,
  23.     objBuy0.isLastPage = res.page.last,
  24.     that.setData({
  25.       isBuying: objBuy0
  26.     });
  27.     objBuy0.pageNum++;
  28.     if (!!res.page.last){
  29.       objBuy0.nomore = false;
  30.       that.setData({
  31.         isBuying: objBuy0
  32.       });
  33.     }
  34.   });
  35. };
  36. var loadMsgData1 = function(that){
  37.   //初始化隐藏列表
  38.   var objBuy1 = that.data.futureBuying;
  39.   objBuy1.hidden = false;
  40.   that.setData({
  41.     futureBuying: objBuy1
  42.   });
  43.   var allMsg = objBuy1.msgList;
  44.   util.req('squareDance/getSquareDanceVideoPage', {
  45.     "index": objBuy1.pageNum,
  46.     "size": objBuy1.pageSize
  47.   }, function (res) {
  48.     console.log(res)
  49.     //生成新的商品信息数组
  50.     allMsg = allMsg.concat(res.content);
  51.     objBuy1.hidden = true,
  52.     objBuy1.msgList = allMsg,
  53.     objBuy1.isLastPage = res.last,
  54.     that.setData({
  55.     futureBuying: objBuy1
  56.     });
  57.     objBuy1.pageNum++;
  58.     if (!!res.last) {
  59.       objBuy1.nomore = false;
  60.       that.setData({
  61.         futureBuying: objBuy1
  62.       });
  63.     }
  64.   });
  65. };
  66. var loadMsgData2 = function (that) {
  67.   //初始化隐藏列表
  68.   var objBuy2 = that.data.futureBuying1;
  69.   objBuy2.hidden = false;
  70.   that.setData({
  71.     futureBuying1: objBuy2
  72.   });
  73.   var allMsg = objBuy2.msgList;
  74.   util.req('mall/getPanicBuyItemList', {
  75.     "index": objBuy2.pageNum,
  76.     "size": objBuy2.pageSize,
  77.     "flag": "wait"
  78.   }, function (res) {
  79.     //生成新的商品信息数组
  80.     allMsg = allMsg.concat(res.page.content);
  81.     objBuy2.hidden = true,
  82.       objBuy2.msgList = allMsg,
  83.       objBuy2.isLastPage = res.page.last,
  84.       that.setData({
  85.         futureBuying1: objBuy2
  86.       });
  87.     objBuy2.pageNum++;
  88.     if (!!res.page.last) {
  89.       objBuy2.nomore = false;
  90.       that.setData({
  91.         futureBuying1: objBuy2
  92.       });
  93.     }
  94.   });
  95. };
  96. //页面数据配置
  97. Page({
  98.   data: {
  99.     scrollTop: 0,
  100.     scrollHeight: 0,
  101.     //tab栏的下标
  102.     pageTab: {
  103.       curHdIndex: 0,
  104.       curBdIndex: 0
  105.     },
  106.     isBuying: {
  107.       hidden: true,
  108.       isLastPage: false,
  109.       nomore: true,
  110.       pageNum: 0,
  111.       pageSize: 7,
  112.       msgList: []
  113.     },
  114.     futureBuying: {
  115.       hidden: true,
  116.       isLastPage: false,
  117.       nomore: true,
  118.       pageNum: 0,
  119.       pageSize: 7,
  120.       msgList: []
  121.     },
  122.     futureBuying1: {
  123.       hidden: true,
  124.       isLastPage: false,
  125.       nomore: true,
  126.       pageNum: 0,
  127.       pageSize: 7,
  128.       msgList: []
  129.     }
  130.   },
  131.  pageHdtap: function (e) {
  132.     var that = this;
  133.     console.log(e)
  134.     //点击子元素
  135.     var _datasetId = e.target.dataset.id;
  136.     var _leftObj = {};
  137.     _leftObj.curHdIndex = _datasetId;
  138.     _leftObj.curBdIndex = _datasetId;
  139.     that.setData({
  140.       scrollTop: 0,
  141.       pageTab: _leftObj,
  142.       isBuying: {
  143.         hidden: true,
  144.         isLastPage: false,
  145.         nomore: true,
  146.         pageNum: 0,
  147.         pageSize: 7,
  148.         msgList: []
  149.       },
  150.       futureBuying: {
  151.         hidden: true,
  152.         isLastPage: false,
  153.         nomore: true,
  154.         pageNum: 0,
  155.         pageSize: 7,
  156.         msgList: []
  157.       }
  158.     });
  159.     if (_datasetId == 0) {
  160.       //初始化第0页数据
  161.       loadMsgData0(that);
  162.     } else if (_datasetId == 1){
  163.       //初始化第1页数据
  164.       loadMsgData1(that);
  165.     }else{
  166.     //初始化第2页数据
  167.       loadMsgData2(that);
  168.     }
  169.   },
  170.   onLoad: function (options) {
  171.     // 页面初始化 options为页面跳转所带来的参数  
  172.     var that = this;
  173.     wx.getSystemInfo({
  174.       success: function (res) {
  175.         that.setData({
  176.           windowHeight: res.windowHeight,
  177.           windowWidth: res.windowWidth
  178.         })
  179.       }
  180.     });
  181.     loadMsgData0(that);
  182.   },
  183.   onReady: function () {
  184.     // 页面渲染完成  
  185.   },
  186.   onShow: function () {
  187.     // 页面显示  
  188.   },
  189.   // 下拉刷新数据  
  190.    pullDownRefresh: function () {
  191.     var that = this;
  192.     //0
  193.     var objBuy0 = that.data.isBuying;
  194.     objBuy0.pageNum = 0;
  195.     objBuy0.msgList = [];
  196.     //1
  197.     var objBuy1 = that.data.futureBuying;
  198.     objBuy1.pageNum = 0;
  199.     objBuy1.msgList = [];
  200.     var objBuy2 = that.data.futureBuying1;
  201.     objBuy2.pageNum = 0;
  202.     objBuy2.msgList = [];
  203.     that.setData({
  204.       isBuying: objBuy0,
  205.       futureBuying: objBuy1,
  206.       futureBuying1: objBuy2,
  207.       scrollTop: 0
  208.     });
  209.     loadMsgData0(that);
  210.     loadMsgData1(that);
  211.     loadMsgData2(that);
  212.   },
  214.   // 上拉加载数据 
  215.   pullUpLoad: function () {
  216.     var that = this;
  217.     if (!that.data.isBuying.isLastPage) {
  218.       loadMsgData0(that)
  219.     }
  220.     if (!that.data.futureBuying.isLastPage) {
  221.       loadMsgData1(that)
  222.     }
  223.     if (!that.data.futureBuying1.isLastPage) {
  224.       loadMsgData2(that)
  225.     }
  226.   },
  227.   // 定位数据  
  228.   scroll: function (event) {
  229.     var that = this;
  230.     that.setData({
  231.       scrollTop: event.detail.scrollTop
  232.     });
  233.   },
  234.   onHide: function () {
  235.     // 页面隐藏  
  236.   },
  237.   onUnload: function () {
  238.     // 页面关闭 
  239.   }
  240. })

pages/mall/list/list.json

  1. {
  2.  "navigationBarTitleText": "商品列表",//当前页面的标题
  3. }

pages/mall/list/list.wxml

  1.     <view  class="page">  
  2.     <view class="page__bd">  
  3.         <!--用name 定义模版-->  
  4.         <template name="msgTemp">  
  5.             <view  class="weui-panel__bd">  
  6.             <!--页面路由跳转 -->  
  7.                 <navigator url="../detail/detail?itemId={{itemId}}&activityId={{activityId}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">  
  8.                     <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">  
  9.                         <image class="weui-media-box__thumb" src="{{coverPic}}" style="width: 60px; height: 60px;"/>  
  10.                     </view>  
  11.                     <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">  
  12.                         <view class="">{{name}}</view>  
  13.                         <view class="weui-media-box__desc">{{discountPrice}}</view>  
  14.                     </view>  
  15.                 </navigator>  
  16.             </view>  
  17.         </template>  
  19.     <view class="top" catchtap="pageHdtap">
  20.       <view class="tab01 {{pageTab.curHdIndex==0? 'active': ''}}" data-id="0">正在抢购</view>
  21.       <view class="tab02 {{pageTab.curHdIndex==1? 'active': ''}}" data-id="1">即将开抢</view>
  22.     </view>
  24.     <view class="tab-bd" style="height: 100%;">
  25.     <!--tab1 start--><!--三目运算符 -->  
  26.       <view class="tab-bd01 {{pageTab.curBdIndex==0? 'show': 'hide'}}" style="height: 100%;">
  27.           <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;"                 scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">  
  28.                   <view wx:for-items="{{isBuying.msgList}}" wx:key="{{item.itemId}}">  
  29.                       <view class="kind-list__item">  
  30.                           <!--用is 使用模版-->  
  31.                           <template is="msgTemp" data="{{...item}}"/>  
  32.                       </view>  
  33.                   </view>  
  34.                   <view hidden="{{isBuying.nomore}}" class="noMore-content">   
  35.                    没有更多了
  36.                   </view>
  37.           </scroll-view>  
  38.           <view>  
  39.               <loading hidden="{{isBuying.hidden}}" bindchange="loadingChange">  
  40.               加载中...  
  41.               </loading>  
  42.           </view>
  43.       </view>
  44.     <!--tab1 end-->
  45.     <!--tab2 start-->
  46.       <view class="tab-bd02 {{pageTab.curBdIndex==1? 'show': 'hide'}}" style="height: 100%;">
  47.           <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;"                 scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">  
  48.                   <view wx:for-items="{{futureBuying.msgList}}" wx:key="{{item.itemId}}">  
  49.                       <view class="kind-list__item">
  50.                           <!--用is 使用模版-->  
  51.                           <template is="msgTemp" data="{{...item}}"/>  
  52.                       </view>  
  53.                   </view>  
  54.                   <view hidden="{{futureBuying.nomore}}" class="noMore-content">   
  55.                    没有更多了
  56.                   </view>
  57.           </scroll-view>  
  58.           <view>  
  59.               <loading hidden="{{futureBuying.hidden}}" bindchange="loadingChange">  
  60.               加载中...  
  61.               </loading>  
  62.           </view>
  63.       </view>
  64.     <!--tab2 end-->
  65.     </view>
  66.   </view>  
  67.     <view class="page__ft"></view>  
  68. </view>

3 商品详情页面代码

  1. //detail.wxml
  2. <swiper class="detail-swiper" indicator-dots="{{indicatorDots}}" circular = "true"
  3.       autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  4.       <block wx:for="{{imgUrls}}">
  5.         <swiper-item>
  6.           <image src="{{item}}" class="slide-image" width="355"                   height="250"/>
  7.         </swiper-item>
  8.       </block>
  9.       </swiper>
  11. // detail.js
  12. var app = getApp();
  13. var util = require('../../../utils/util.js');
  14. Page({
  15.   data: {
  16.     msgDetail: {},
  17.     imgUrls:[],
  18.     autoplay: true,
  19.     indicatorDots: true,
  20.     interval: 4000,
  21.     duration: 1000
  22.   },
  23.   onLoad: function (options) {
  24.     console.log(options)
  25.     var that = this;
  26.     util.req('mall/getItemDetailV4', {
  27.       // id: options.id
  28.       itemId: options.itemId,
  29.       activityId: options.activityId
  30.     }, function (res) {
  31.       that.setData({
  32.         msgDetail: res.data.itemDetail,
  33.         imgUrls: res.data.itemDetail.pics
  34.       })
  35.     });
  36.   },
  37.   onReady: function () {
  38.     // 页面渲染完成  
  39.   },
  40.   onShow: function () {
  41.     // 页面显示  
  42.   },
  43.   onHide: function () {
  44.     // 页面隐藏  
  45.   },
  46.   onUnload: function () {
  47.     // 页面关闭  
  48.   }
  49. })

4 定位页面代码

(1) 获取位置
wx.getLocation(OBJECT) 获取当前的地理位置、速度。

  1.  wx.getLocation({
  2.     type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
  3.     success: function (res) {
  4.       that.setData({
  5.         hasLocation: true,
  6.         location: {
  7.             longitude: res.longitude,
  8.             latitude: res.latitude
  9.         }
  10.       })
  11.     }
  12.   })
(2)wx.openLocation(OBJECT) 使用微信内置地图查看位置

  1.  openLocation: function (e) {
  2.     var value = e.detail.value
  3.     wx.openLocation({
  4.       longitude:value.longitude,
  5.       latitude: value.latitude,
  6.       scale: 28
  7.     })
  8.   }

5 登陆页面代码

  1. formSubmit: function (e) {
  2.     var account = e.detail.value.account;
  3.     var password = e.detail.value.password;
  4.     var that = this;
  5.     wx.login({
  6.       success: function(res){
  7.         if (res.code){
  8.           wx.getUserInfo({
  9.             success: function (res1) {//获取userinfo成功
  10.               wx.request({
  11.                 url: 'https://api.orangelife.com.cn/loginV4',
  12.                 data: {
  13.                   appCode: null,
  14.                   mobile: account,
  15.                   password: password,
  16.                   captcha_code: '',
  17.                   captcha_token: ''
  18.                 },
  19.                 method: 'POST',
  20.                 // header: {}, // 设置请求的 header 默认是application/json  
  21.                 success: function (res) {
  22.                   console.log(res)
  23.                   // 操作json数据  
  24.                   if (res.statusCode == 200) {
  25.                     wx.showModal({
  26.                       title: '登陆状态',
  27.                       content: '登陆成功',
  28.                       success: function (res) {
  29.                         console.log(res)
  30.                         if (res.confirm) {
  31.                           // 点击确定后跳转页面并关闭当前页面  
  32.                           wx.switchTab({
  33.                             url: '../user/user'
  34.                           })
  35.                         }
  36.                       }
  37.                     })
  38.                   }
  39.                 },
  40.                 fail: function () {
  41.                   // fail  
  42.                 },
  43.                 complete: function () {
  44.                   // complete  
  45.                 }
  46.               })
  47.             },
  48.             fail: function () {
  49.               // 调用微信弹窗接口
  50.               wx.showModal({
  51.                 title: '警告',
  52.                 content: '您点击了拒绝授权，将无法正常使用***的功能体验。请10分钟后再次点击授权，或者删除小程序重新进入。',
  53.                 success: function (res) {
  54.                   if (res.confirm) {
  55.                     console.log('用户点击确定')
  56.                   }
  57.                 }
  58.               })
  59.             }
  60.           })
  61.         }else{
  62.           console.log('获取用户登录态失败！' + res.errMsg)
  63.         }
  64.       }
  65.     })
  66.   }

更多信息

[微信公众平台开发者社区]
[框架、组件、API、工具]
[微信小程序联盟]

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注