abstrait：首先總結(jié)一下學(xué)習(xí)到的知識一.全局配置    * 全局配置文件app.js    主要用來配置所有頁面,總頁面的最上方窗口顏色,標(biāo)題,tabBar等.    * 公共模塊文件util.js    公共的模塊只能通過 module.e

首先總結(jié)一下學(xué)習(xí)到的知識

一.全局配置

    * 全局配置文件app.js

    主要用來配置所有頁面,總頁面的最上方窗口顏色,標(biāo)題,tabBar等.

    * 公共模塊文件util.js

    公共的模塊只能通過 module.exports或者 exports才能對外訪問,在需要用到這個(gè)模塊的方法中 require()即可使用

var requestUrl = "http://www.admin.com/index.php";    //引入通用url
function post(url,data,fun,that) {    
if(url == ''){
return false;
}
url = requestUrl+url;    //拼接url
wx.request({    //發(fā)起請求,也就是請求一個(gè)url接口
url: url, // 僅為示例，并非真實(shí)的接口地址
data: data,    //數(shù)據(jù)
header: {
'content-type': 'application/json' // 默認(rèn)值
},
method : "POST",    //傳輸方法
dataType : "json",    //格式
success(res) {    //請求成功
that[fun](res.data.result);    
// console.log(res.data)
},
fail : function(res){    //請求失敗
console.log('請求失敗');
return false;
}
})
}
module.exports.post = post    //暴露接口

/*****************************************************************************/
var com = require("../../utils/util.js");    //引入

二.各個(gè)頁面中的方法

    1.page({})中的onLoad : function(){} 當(dāng)頁面加載執(zhí)行的方法

    2.wx.request({})    發(fā)起請求  url:請求的url地址   data  傳輸?shù)臄?shù)據(jù)   method  請求方式  dataType 數(shù)據(jù)格式  success請求成功執(zhí)行  fail 請求失敗執(zhí)行 

    3.this.setData({})  設(shè)置傳輸?shù)角芭_(tái)的數(shù)據(jù)  

    4.wx.getSystemInfoSync() 獲取系統(tǒng)信息,包括手機(jī)型號等

    5.wx.navigateTo 跳轉(zhuǎn)   <navigete url="url"></navigator>  跳轉(zhuǎn) 

    6.wx:for="{{lists}}"  循環(huán)數(shù)據(jù)  {{item}} 遍歷的數(shù)據(jù)

    7.bindtap="method" 綁定點(diǎn)擊事件

-----------------------------------------------------------------------------------------------------------------------------------------------------

下面沾了些代碼,大部分都差不多,所以只沾幾個(gè)比較特殊的吧

<!--index.wxml-->
<view class="container">
<!-- 輪播圖 -->
<view class="swiper_content">
<swiper indicator-dots="true" indicator-color="#A33" indicator-active-color="#fff" autoplay="true" interval="4000" circular="true">
<block wx:for="{{img}}" wx:key="">
<swiper-item>
<image src='{{item}}' class="item_img"></image>
</swiper-item>
</block>  
</swiper>
</view>
<!-- 輪播圖結(jié)束 -->
<view class="news_content">
<view class="news_total"> -- 最新新聞 -- </view>
<!-- 新聞頁面 -->
<block wx:for="{{list}}" wx:key="">
<view class="news_contents" >
<navigator url='../news/details?id={{item.id}}'>
<image src="{{item.img}}"></image>
<view class="news_text">
<view class="news_title">
{{item.title}}
</view>
<view class="news_desc">
{{item.title}}....
</view>
<view class="news_time">
--- {{item.add_time_s}}
</view>
</view>
</navigator>  
<view class="clear"></view>
</view>
</block>  
</view>
</view>

// pages/shop/list.js
var com = require("../../utils/util.js");
var page = 1;
var total = 0;
Page({
/**
   * 頁面的初始數(shù)據(jù)
   */
data: {
lists : [],
new : [],
height:0,
total:0
},

/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
onLoad: function (options) {
var sync = wx.getSystemInfoSync();
console.log(sync);
this.setData({
height: sync.screenHeight
})
com.post("/api/home/shop_list", {page : page}, "setContent", this);
},
setContent : function(res){
console.log(res);
this.setData({
lists : this.data.lists.concat(res.product.lists),
new: res.new,
total : res.product.total
})
},
plus_p : function(){
if(page<=this.data.total){
page = page + 1;
com.post("/api/home/shop_list", { page: page }, "setContent", this);
}
},
goUrl : function(e){
console.log(e);
wx.navigateTo({
url: 'details?id=' + e.currentTarget.dataset.id,
})
}
})

<!--pages/shop/list.wxml-->
<view class="container"> 
<view class="list_title">
<text>-- 熱銷產(chǎn)品 -- </text>
</view>
<view class="shop_list">
<view class="list_item" wx:for="{{new}}" wx:key="" bindtap="goUrl" data-id="{{item.id}}">
<image src='{{item.img}}'></image>
<text>{{item.title}}</text>
</view>
</view>
<view class="list_title">
<text>-- 主營商品 -- </text>
</view>
<scroll-view class="shop_list" style="height:500px" scroll-y="true" bindscrolltolower="plus_p">
<view class="list_item" wx:for="{{lists}}" wx:key="" bindtap="goUrl" data-id="{{item.id}}">
<image src='{{item.img}}'></image>
<text>{{item.title}}</text>
</view>
</scroll-view>  
</view>

// pages/shop/details.js
var com = require("../../utils/util.js");
var img = [];
Page({

/**
   * 頁面的初始數(shù)據(jù)
   */
data: {
content:[]
},
/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
onLoad: function (options) {
com.post("/api/home/shop_details",{id:options.id},"setContent",this);
},
setContent : function(res){
console.log(res);
this.setData({
content : res
})
img = res.imgs
console.log(img)
},
previews : function(e){
console.log(e);
wx.previewImage({
urls: img,
current: e.currentTarget.dataset.src
});
}
})

<view class="container">
<view class="list_swiper">
<swiper indicator-dots="true" autoplay="true" class="swipers">
<block wx:for="{{content.imgs}}" wx:key=""> 
<swiper-item>
<image src="{{item}}" bindtap="previews" data-src="{{item}}" />
</swiper-item>      
</block>  
</swiper>
</view>
<!-- 名稱  -->
<view class="title">
{{content.title}}
</view>
<!-- 名稱結(jié)束  -->

<!-- 價(jià)格 -->
<view class="list_price">
<text class="old" space='true'>{{content.old_price}}元/h</text>
<text class="new">{{content.price}}元/h</text>
</view>
<!-- 價(jià)格結(jié)束 -->
<!-- 分割 -->
<view class="gray"></view>
<!-- 分割結(jié)束 -->

<view class="content_title">
<view></view>描述
</view>
<view class="desc">
{{content.desc}}
</view>
</view>

Professeur correcteur：查無此人Temps de correction：2019-01-04 18:00:44
Résumé du professeur：做的不錯(cuò)，理解的透徹。小程序基本功能你都會(huì)了，如果工作上有需求，還可以多看看小程序api，能發(fā)現(xiàn)更多功能。