王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
mvc思想
view层
home.wxml
model层
home.model.js
controller层
home.js
数据的加载与绑定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
没有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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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引入
|
1 |
@import "../......base.wxss"; |
wxif
|
1 2 |
<view wx:if="{{index==2}}"> ...... </view> <view wx:else> .......... </view> |
模版
|
1 2 3 4 5 6 7 8 9 10 11 |
定义: <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 传递接收参数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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设置
https://www.wangmingchang.com/3303.html
tarbar至少两个最多5个
tarbar上方的黑线: “borderStyle”:”white”
动态设置导航栏标题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Page({ data:{}, onLoad:function(options){ var id = options.id; var data.name ='标题'; } onReady:function(){ wx.setNavigationBarTitle({ title:this.data.name, }) } }) |
商品详情
picker组件(选择数量)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 }) } |
实时改变—使用数据绑定
自定义选项卡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 隐藏 |
商品分类
小程序操作流程图
