tp5+小程序开发笔记(九)小程序开发

mvc思想

view层 home.wxml model层 home.model.js controller层 home.js

数据的加载与绑定

home模型的model层
class Home{
//构造函数
  constructor(){
  
  }
  getBannerDate(id,callBack){
    wx.request({
      url:'http://www.ccccccc'+id,
      method:'GET',
      success:function(res){
          //console.log(res);
          callBack(res);
      }
    })
  }
}
export{Home}

-----------------------
home模型的controller类
import{Home} from 'home.model.js';
var home = new Home();//实例化Home
Page({ 
   data:{

   },
//onload  页面初始化的小程序生命周期函数
   onload:function(){
   this._loadData();
  },
   _onload:function(){ 
    var $id = 1;
   home.getBannerData(id,(res)=>{
         console.log(res);
    });
    //console.log(res);
  },
})

-----------------------
//构建请求基类----将wx.request 封装
根目录新建utils/Base.js

import{Config} from '../utils/confgi.js';
class Base{
//构造方法
   constructor(){
    //this.baseRequestUrl = 'http:www.wanmgmingchang.com/api/v1/'//最好放入配置文件中
      this.baseRequestUrl = Config.restUrl;//静态调用,不用实例化
   }

   request(params){ 
      var url = this.baseRequestUrl  + params.url;
      if(!params.type){
         params.type = 'GET;
      }
      wx.request({
        url:url,
        data:params.data,
        method:params.type,
        header:{
          'content-type':'application/json',
          'token': wx.getStorageSync('token')   //令牌从小程序的缓存中读取
       },
        success:function(res){
           //if(params.sCallback){
                 //params.sCallback(res.data);
            //}
            //与if上述if用法一样
            params.sCallback&¶ms.sCallback(res)
       },
        fail:function(err){
              console.log(err);
       }          
     })
   }
}
export(Base);


--------------------------
//新建配置文件 config.js
class Config{
   constructor(){
   
  }
}
  Config.restUrl = 'http:www.wanmgmingchang.com/api/v1/';
export{Config};

-----------------------
使用基类后的model 
import {Base} from '../../utils/base.js';
class Home extends Base{
//构造函数
 constructor(){
 //调用基类的构造函数
  super();
 }
 getBannerDate(id,callback){
      var params = {
         url: 'banner/'+id,
         sCallback:function(res){
            callback && callback(res.item);
         }
      }
 }
}
export{Home}

将数据绑定到wxml 与 wxfor

没有dom  只有绑定
controller:
this.setData({
   'bannerArr':res
})

view:
数据绑定使用双花括号

  
     
          
     
  




------------
theme调取
1.controller
_onload:function(){ 
 home.getThemeData((res)=>{
   this.setData({
   'ThemeArr':res
  })
 });
 },

2.model
 getThemeDate(callback){
    var params = {
    url: 'theme?id=1,2,3',
    sCallback:function(data){
      callback && callback(data);
    }
    }
 }
3.view
 
 
 

校验域名

模拟器: 项目---不校验https........ 真机: 1.HTTPS 2.加入合法域名列表中 小程序后台---设置---服务器域名---request合法域名 处理异步回调函数

1.  
 _onload:function(){ 
    var $id = 1;
    var $data = home.getBannerData(id,this.callBack);
    //console.log(res);
  },
//处理异步结果接收
  callBack:function(res){
  //console.log(res);
  }

2.
 _onload:function(){ 
    var $id = 1;
    var $data = home.getBannerData(id,(res)=>{
       console.log(res);
    });
    //console.log(res);
  },

wxss引入

@import "../......base.wxss";

wxif

   ......     
    ..........        

模版

定义:


引入:
 //加载
//

模版引进来了,样式并不会引进来,在...wxss中引入样式

全局样式

app.wxss

页面跳转 and 传递接收参数

  
     
          
     
  



onProductsItemTap方法
Page({
   onProductsItemTap:function(event){
      var id = event.currentTarget.dataset.id1;
---------
基类定义
getDataSet(event,key){
  return event.currentTarget.dataset[key];
}
使用
var id = home.getDataSet(event,'id1');

--------
      wx.navigateTo({
         url:'../product/product?id'+id      ////////传递
      })
   }
})

data-id中id可以换成自己设置的变量;例:data-id1
event获取中,,,,获取的是id1,没有前面的data-


Page({
  data:{},
  onLoad:function(options){
     var id = options.id;                    ////////接收
  }
 
 })

窗口设置/tarbar设置

http://www.wangmingchang.com/3303.html tarbar至少两个最多5个 tarbar上方的黑线: "borderStyle":"white"

动态设置导航栏标题

Page({
  data:{},
  onLoad:function(options){
     var id = options.id;
     var data.name ='标题';
                  
  }
  onReady:function(){
    wx.setNavigationBarTitle({
        title:this.data.name,
    }) 
 }
})

商品详情

picker组件(选择数量)

   
  {{productCount}}//实时显示数量



data:{
countArr:[1,2,3,4,5,6],
}

bindPickChange:function(event){
  var index = event.detail.value;
  var selectedCound  = this.data.countsArr[index]
  this.setData({
    productCount:selectedCount
})
}

实时改变---使用数据绑定

自定义选项卡

   {{item}}




onTabsItemTap:function(event){
  var index = product.getDataSet(event,'index');
  this.setData({
     currentTabsIndex:index
})
}


 //hidden=true 隐藏

商品分类

小程序操作流程图