項目目錄理解

components	自定義組件庫
config	一個公用的數據配置
images	本地、上傳的圖片放置
pages	pages目錄存儲小程序的每個頁面，每個頁面包含四個文檔.json為配置文件.wxml 為模板文件，相當于HTML模板.wxss 為樣式文件，相當于HTML的CSS樣式表.js 為JS 腳本邏輯文件，相當于HTML的js腳本
utils	一個共用程序邏輯庫公共的js函數文件，通過module.exports的方式暴露pages下的每個頁面使用不需要每個頁面編寫重復的Js代碼。
app.js	必填，小程序邏輯
app.json	必填，小程序公共配置
app.wxss	選填，小程序公共樣式表
project.config.json	項目配置文件或稱為項目IDE配置文件在“微信開發者工具”上做的任何配置都會寫入到這個文件

絕對路徑和相對路徑

“/”表示根目錄
"…"表示返回上一級
區別：相對路徑習慣用“…/”表示上一級

尺寸

rpx
換算：1px = 1rpx 要求：設計搞寬高滿足750X1334 ipone6
px與rpx的區別：rpx可以自適應。讓元素寬高根據不同屏幕自適應，px是固定大小的尺寸

元素偏移量

<view class="parent"><view>hello</view><view class="child"></view> </view> .parent{display:inline-flex; /* 自適應寬度 */width:90rpx;padding:10rpx; /* 解決子元素偏移量超出不顯示問題，讓子元素正常顯示 */ } .child{position:relative;top:-10rpx;left:6rpx }

字體

eg：font-family:“PingFangSC-Thin” 設置平方細體 ，只在ios上有效
消除字體上下間距：eg:font-size:24rpx;line-height:24rpx;

數據來源

wxml
js——>wxml
服務器——>js——>wxml

數據綁定

“{{}}”插值
屬性中同樣使用“{{}}”
組件中存儲數據有兩個地方：properties存儲其他外部引用的數據；data里存儲組件中單獨使用的數據

三元表達式：{{key? ‘yes’:‘no’}}。在雙大括號“{{}}”中使用

生命周期函數

onLoad:function(options){ } //監聽頁面加載
onReady:function(){ } //監聽頁面初次渲染完成
onShow:function(){ } //監聽頁面顯示
onHide:function(){ } //監聽頁面隱藏
onUnload:function(){ } //監聽頁面卸載

組件性的封裝性、開放性、粒度：小組件靈活、大組件放方便

封裝性：data里存儲組件封裝的數據供組件內部使用
開放性：properties存儲組件開放的數據供其他外部使用；
粒度：組件功能的封裝開放性
properties詳解：
properties下的屬性：對象形式
三個屬性：eg:

like:{type：String //類型，必須value: '' //初始值，observer:function(){} } <view class="like-box" bindtap="onLike"><image src="{{islike?isimg:notimg}}" class="like-img"></image><text class="like-text">{{count}}</text> </view> //開放屬性：為了可以從外部設置的屬性 properties: {islike: { // javascript對象：屬性type(屬性類型，必填)、value(初始默認值)、observer（）type: Boolean,value: false,observer:function(){...}},count: {type: Number,value: 9} }, //封閉屬性：內部屬性 data:{isLike:true,yesImg:'/images/yes.png',noImg:'/images/no.png' } //粒度 methods: {onLike:function(event){let islike = this.properties.islikelet count = this.properties.countcount = islike ? count - 1 : count + 1this.setData({count: count,islike: !islike})}}

組件事件應用：

訪問properties中的屬性：this.properties.islike methods: {onLike:function(event){ //自定義事件let islike = this.properties.islike //訪問properties中的屬性let count = this.properties.countcount = islike ? count - 1 : count + 1this.setData({count: count,islike: !islike})}}

js中取data、properties中的數據

this.data.數據屬性
this.properties.數據屬性

js中改變data、properties中的數據：

data:{like:false } this.setData({like:!this.data.like })

@TOC

url	服務器接口地址，必須
data	請求的參數
header	請求的頭部
method	請求方式：POST(請求數據)、GET（提交數據）、PUT（更新數據）…
success	成功的回調參數
fail	失敗的回調參數（一般的失敗不包括返回失敗狀態嗎之類的錯誤，而是網絡錯誤等錯誤）

HTTP狀態碼

200 請求成功
201 創建成功
202 更新成功
204 刪除成功
301 永久重定向
400 請求包含不支持的參數
401 未授權
403 被禁止訪問
404 請求的資源不存在
413 上傳的file文件體積過大
500 服務器錯誤

wx:request二次封裝

wx.request(object)：發起網絡http請求 屬性參數： url:'' //開發者服務器接口地址 data:'' //請求的參數 header:'' //設置請求的 header，header 中不能設置 Referer。content-type 默認為 application/json method:'' //HTTP 請求方法(GET\POST\PUt\DELETE\HEAD\OPTIONS\TRACT\CONNECT) dataType :'' //返回的數據格式(JSON\其他) responseType: '' //響應的數據類型 success: //接口調用成功的回調函數 fail : //接口調用失敗的回調函數 complete : //接口調用結束的回調函數（調用成功、失敗都會執行） wx.request({url: '', data:'',header:'',method:'',dataType:'',success: })

a) 根目錄下的config.js做一些常量配置
b) http.js請求方法寫請求方法，并引用常量配置文件
c) module配置頁面請求方法接口模型
d) 頁面導入實例化使用

// config.js const config = {api_base_url: 'http://bl.7yue.pro/v1/',appkey: "AbhC31IG7ruCDp57", }export { config } // http.js import {config} from '../config.js'const tips = {// 自定義錯誤碼提示1: '抱歉，出現了一個錯誤',1005:'appkey無效，請前往www.7yue.pro申請',3000:'期刊不存在' }class HTTP{request(params){// url, data, method,if(!params.method){params.method="GET"}wx.request({url:config.api_base_url + params.url,method:params.method,data:params.data,header:{'content-type':'application/json','appkey':config.appkey},success:(res)=>{// 獲取http狀態碼let code = res.statusCode.toString()if (code.startsWith('2')){//請求回調函數，把請求結果通過success回調函數傳遞回去params.success && params.success(res.data)}else{// 服務器異常調用let error_code = res.data.error_codethis._show_error(error_code)}},fail:(err)=>{this._show_error(1)}})}// 服務器異常方法_show_error(error_code){if(!error_code){error_code = 1}const tip = tips[error_code]wx.showToast({title: tip?tip:tips[1], icon:'none',duration:2000}) } }export {HTTP} // module/classic.js import { HTTP } from '../utils/http.js' // 繼承 class Classic extends HTTP {getLatest(sCallback) {this.request({url: 'classic/latest',method: 'GET',success: (res) => {sCallback(res)}})} } export { Classic } // index.js import { Classic } from '../../models/classic.js' let classicModel = new Classic()data: {classicData:null,},onLoad: function (options) {classicModel.getLatest((res)=>{console.log(res)this.setData({classicData:res})})},

export與import

export導出模塊
import導入模塊
注意事項：（1）import導入的名字必須與export的一樣（2）使用 as重命名

全局使用：app.js

App({// 全局數據對象globalData: {isIphoneX: false,isIos: false,screenHeight: 667,screenWidth: 375,windowHeight: 667,windowWidth: 375,rpx: 0.5,user_id: '',open_id: '',},// 應用程序啟動時觸發一次onLaunch() {//獲取系統信息,獲取手機型號//screenWidth 、screenHeight（屏幕寬、高）//windowWidth 、windowHeight （可使用窗口寬、高）//windowWidth 、windowHeight （可使用窗口寬、高）// model（型號）// platform (客戶端平臺)var that = this;wx.getSystemInfo({success(res){that.globalData.screenHeight = res.screenHeight;that.globalData.screenWidth = res.screenWidth;that.globalData.windowHeight = res.windowHeight;that.globalData.windowWidth = res.windowWidth;that.globalData.rpx = Number((res.windowWidth / 750).toFixed(4));if (res.model.search('iPhone X') != -1) {that.globalData.isIphoneX = true}if (res.platform == 'ios') {that.globalData.isIos = true;}}});},// 全局方法，具體的把一些后面頁面操作公共數據的公共方法寫在這里onHide() {this.data.webShowed = false},setOpenId(open_id) {this.globalData.open_id = open_id;},getOpenId() {return this.globalData.open_id;},setUserId(user_id) {this.globalData.user_id = user_id;},getUserId() {return this.globalData.user_id;} });

組件的定義與使用

定義
a) 組件存儲目錄：components
b) 新建組件：新建目錄——>新建component
c) 組件名字兩級名字不需要都一樣，可以目錄外層命名，頁面都定義為index

使用
a) 定義
組件存儲目錄：components
新建組件：新建目錄——>新建component
組件名字兩級名字不需要都一樣，可以目錄外層命名，頁面都定義為index
b) 引用和使用
組件定義完沒有任何突出，只需要在page頁面中引用就可以使用了
引用：首先在要引用組件的頁面的.json里，找到“usingComponents”屬性，把要引用的組件通過對象鍵值對配置好就好；組件引用要使用絕對路徑（/斜杠表示根目錄）；“key”:“components/like/index”，key為自定義組件名，為了容易看出是組件，推薦v-開頭，eg: “v-like”
使用：
c) 從外部設置組件propeties中的屬性值：
把數據從頁面js綁定到頁面中的組件上
d) 自定義事件的激活與監聽：
組件上：bind:islike=“onLike”
js：激活islike事件this.triggerEvent(‘islike’,{behavior: behavior },{})；第一個參數是自定義事件名稱，第二個是傳遞的參數，第三個…
頁面自定義事件監聽：onLike(e){console.log(e.detail.behavior)} 從中就能取到事件傳遞的參數

<!--components/like/index.wxml--> <view class="like-box" bindtap="onLike"><image src="{{islike?isimg:notimg}}" class="like-img"></image><text class="like-text">{{count}}</text> </view> // components/like/index.js Component({properties: {islike:{type:Boolean,value:false},count:{type:Number,value:9}},data: {isimg:"/images/shouye/islike.png",notimg:"/images/shouye/notlike.png"},methods: {onLike:function(event){//自定義事件let islike = this.properties.islikelet count= this.properties.countcount = islike?count-1:count+1this.setData({count:count,islike:!islike})//激活一個事件 this.triggerEventlet behavior = this.properties.islike?'islike':'notlike'this.triggerEvent('islike',{behavior: behavior},{})}} }) // index.json {"usingComponents":{"v-like":"/components/like/index",} } // index.wxml使用組件 <v-like like="{{classicData.like_status}}" count="{{classicData.fav_nums}}" bind:islike="onLike" /> // index.js onLike:function(event){let behavior=event.detail.behaviorlet id = this.data.classicData.idlet types = this.data.classicData.typelikeModel.like(behavior, id,types)}, // module/like.js import { HTTP } from '../utils/http.js' class Like extends HTTP {like(behavior,artId,category){let url = behavior == 'islike' ? 'like' :'like/cancel'console.log(behavior, artId, category)this.request({url:url,method:"POST",data:{index:artId,type:category}})} } export {Like}

組件圖片的使用: 建議放在comonents下的images里

初始化授權

<button open-type="getUserInfo" bindgetuserinfo="goBegin">開始</button>goBegin: function (e) {console.log(e)if (e.detail.errMsg == 'getUserInfo:ok') {// 授權成功，提交用戶信息到后臺，重定向到首頁}},

總結

以上是生活随笔為你收集整理的小程序 开发经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。