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&&params.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:
数据绑定使用双花括号
<swiper indicator-dots="true" autoplay="true">
  <bolck wx:for="{{bannerArr}}">
     <swiper-item>
          <image src="{{item.image.url}}"></image>
     </swiper-item>
  </block>
</swiper>



------------
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
 <bolck wx:for="{{ThemeArr}}">
 <image src="{{item.topic_img.url}}"></image>
 </block>

校验域名

模拟器:

项目---不校验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

<view wx:if="{{index==2}}">   ......     </view>
<view wx:else>    ..........        </view>

模版

定义:
<template name="products">
   <view wx:for"{{products}}">
   </view>
</template>

引入:
<import src="..........product.wxml" /> //加载
//<template is="products" data="{{productArr}}"> </template>
<template is="products" data="{{products:productArr}}"> </template>
模版引进来了,样式并不会引进来,在...wxss中引入样式

全局样式

app.wxss

页面跳转 and 传递接收参数

<swiper indicator-dots="true" autoplay="true">
  <bolck wx:for="{{bannerArr}}">
     <swiper-item data-id1="{{item.key_word}}" data-name="{{item.name}}"
bindtap="onProductsItemTap">
          <image src="{{item.image.url}}"></image>
     </swiper-item>
  </block>
</swiper>


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组件(选择数量)

<picker rang={{countArr}} bindchange="bindPickChange" class="{{product.stock==0?'disabled':''}}">   
  <text>{{productCount}}</text>//实时显示数量

</picker>

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
})
}

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

自定义选项卡

<block wx:for="{{['商品详情','产品参数','售后保障']}}">
<view class="tabs-item" bindtap="onTabsItemTap" data-index="{{index}}">
   {{item}}
</view>
</block>


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


<view hidden=true></view> //hidden=true 隐藏

商品分类

小程序操作流程图