摘要:具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量,接下來使用點(diǎn)語法直接調(diào)用請(qǐng)求下來的值就可以了。
如何向微信小程序?qū)隓EMO源碼:
參考方法
參考學(xué)習(xí)小程序官方文檔小程序官方文檔
小程序目錄簡介app.json :設(shè)置一些工程全局的量
.js : 寫一些函數(shù)邏輯
.wxml: 調(diào)用.js中寫的函數(shù)類似于 web的html 類似于IOS 的View UI 層
.wxss: 控件的屬性描述,類似于 web 的 CSS ,類似于 IOS 的控件屬性封裝
注釋:(每個(gè)目錄的注釋規(guī)則不一樣,但是親測(cè) commond+? 都可以自動(dòng)加注釋)。
小程序組件簡介組件文檔
tabBar && pages && navigationBar一般我們?cè)诠こ痰摹癮pp.json”中設(shè)置 1.pages 所有的頁面路徑,2.window 導(dǎo)航欄頭部 3.tabBar 底部的tabBar,小程序中我們用list 數(shù)組結(jié)構(gòu)存放tabBarItem 。
button//.wxml , 函數(shù)goBack實(shí)現(xiàn)在.js文件中,button 樣式制定在 .wxss文件中
image</>復(fù)制代碼
image 默認(rèn)100%填充控件,定制image樣式需要用到 style 標(biāo)簽樣式。 mode :圖片縮放規(guī)則,“{{}}”代表對(duì)象是一個(gè)參數(shù)
icon</>復(fù)制代碼
圖標(biāo) ,type的類型有success, success_no_circle, info, warn, waiting, cancel, download, search, clear 這幾種
swiper 常用的輪播圖控件</>復(fù)制代碼
canvas :畫布組件(可以自定制一些動(dòng)畫,類似于ios 的CAShapeLayer + UIBezierPath)畫圖邏輯在JS中實(shí)現(xiàn))</>復(fù)制代碼
以畫一個(gè)笑臉為例:
</>復(fù)制代碼
onReady:function(e) {
var context = wx.createCanvasContext("popView", this)
//畫矩形
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
//rect:矩形(X,Y,W,H)
context.rect(0, 0, 200, 200)
context.stroke()
//畫圓型(從右向左畫)
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
//臉最外層圓
//起點(diǎn)moveTo(X, Y)
context.moveTo(160, 100)
//arc(中心點(diǎn)X, 中心點(diǎn)Y, 半徑, 0, 角度(Math.PI=180度), true)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
//嘴巴
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
//左眼
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
//右眼
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
//一個(gè)stroke對(duì)應(yīng)一個(gè)動(dòng)畫節(jié)點(diǎn)
context.stroke()
context.draw()
},
小程序API簡介:API學(xué)習(xí)鏈接
小程序UI布局簡介
flex布局,position ,inline-block,-webkit-box 等都是小程序布局中經(jīng)常用到的。
flex布局簡介 布局參考鏈接display:指定項(xiàng)目是否為伸縮容器,flex塊級(jí)的伸縮,direction:方向
</>復(fù)制代碼
display: flex;
direction: 元素排列方向 row 從左向右 橫向排, row-reverse 從右向左,column 豎向排列
</>復(fù)制代碼
flex-direction: row;
flex-wrap:控制元素是否換行 wrap 順序換行 wrap-reverse 倒序換行
</>復(fù)制代碼
flex-wrap: wrap;
flex-flow: 相當(dāng)于flex-direction: 和 flex-wrap 的綜合體 此處多余。
</>復(fù)制代碼
flex-flow: row wrap;
justify: (主要是對(duì)齊方式玩的花樣比較多) 沿主軸的對(duì)齊方式 主要說下space-around:平均分布在主軸 兩端保留一半空間。space-between 平均分布在主軸 兩端不保留空間。
</>復(fù)制代碼
justify-content: space-around;
align: 沿交叉軸的對(duì)齊方式(content:換行情況下的對(duì)齊方式,具體樣式略)
</>復(fù)制代碼
align-content:center;
position 相對(duì)定位和絕對(duì)定位 (解決問題:單個(gè)對(duì)象靠右側(cè)無其他對(duì)象參考情況下的右對(duì)齊布局)position參考鏈接
position absolute:絕對(duì)定位,相對(duì)于父級(jí),此時(shí)父級(jí)必須是已定位的。 relative:相對(duì)定位,相對(duì)于自己,具體效果實(shí)操中感受 (比如對(duì)象需要離屏幕右邊界20px ,但是右邊無可參考元素時(shí),可考慮絕對(duì)定位,但需要找準(zhǔn)父視圖。)
</>復(fù)制代碼
.mix{
display: flex;
/** margin:相當(dāng)于盒子本身以外相對(duì)方向上的最近的元素,若該方向上沒有元素 則設(shè)置值無效,此時(shí)應(yīng)該使用position進(jìn)行絕對(duì)定位,可相對(duì)布局 **/
margin-top: -20px;
/** 小程序中的定位問題 absolute:啟用絕對(duì)定位 relative:相對(duì)定位**/
position: absolute;
right: 20px;
}
template 復(fù)用模板布局 template使用參考鏈接
小程序簡單交互邏輯
頁面跳轉(zhuǎn) (主要講二級(jí)頁面跳轉(zhuǎn)一級(jí)頁面/非原路返回)
跳轉(zhuǎn)到某個(gè)一級(jí)頁面:url 頁面路徑; open-type:open-type 屬性類型詳解; hover-class :點(diǎn)擊效果
全局變量的賦值</>復(fù)制代碼
查看日志
showSkuIndex 在page data 中聲明的全局變量 都需要在系統(tǒng)的this.setData方法中進(jìn)行賦值
</>復(fù)制代碼
this.setData({
showSkuIndex: index
});
接口請(qǐng)求及數(shù)據(jù)模型解析
微信小程序可以直接處理json數(shù)據(jù) ,例子是在app.js 中封裝的一個(gè)接口。在其他頁面的.js中調(diào)用ajax 并在onShow函數(shù)中進(jìn)行請(qǐng)求。就相當(dāng)于我們的OC 中封裝的一個(gè)網(wǎng)絡(luò)請(qǐng)求方法類。具體調(diào)用參考demo
</>復(fù)制代碼
1.接口請(qǐng)求封裝函數(shù) 一般在app.js中實(shí)現(xiàn)
ajax: function(options){
let that = this;
let params = {};
params = options.data || {};
params.source = "wx_xiaochengxu";
params.version = "3.3.0";
if(params.sign !== undefined){
delete params.sign;
}
params.sign = that.creatSign(params);
// options.data.weChatSession = wx.getStorageSync("weChatSession") || "";
//微信自帶的網(wǎng)絡(luò)請(qǐng)求方法
wx.request({
url: that.globalData.apiUrl + options.url,
method: options.method || "POST",
data: params,
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: options.success,
fail: options.fail
});
},
2.調(diào)用接口請(qǐng)求函數(shù) 如 在index.js中
//首先需要獲取應(yīng)用實(shí)例
var app = getApp()
onShow: function() {
//調(diào)用數(shù)據(jù)請(qǐng)求
this.getIndexData();
},
getIndexData: function() {
var that = this;
app.ajax({
url: "/homepageV4",
success: function (res) {
var data = res.data;
wx.stopPullDownRefresh()
if (data.success) {
that.setData({
//hotBrands 在Page函數(shù)中聲明的一個(gè)全局變量,
hotBrands: data.model.offlineHotList,
});
console.log(data.model)
} else {
wx.showTip(data.message);
}
}
});
//接下來使用點(diǎn)語法直接調(diào)用請(qǐng)求下來的值就可以了。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/115791.html
摘要:具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量,接下來使用點(diǎn)語法直接調(diào)用請(qǐng)求下來的值就可以了。 如何向微信小程序?qū)隓EMO源碼: 參考方法 參考學(xué)習(xí)小程序官方文檔 小程序官方文檔 小程序目錄簡介 app.json :設(shè)置一些工程全局的量.js : 寫一些函數(shù)邏輯.wxml: 調(diào)用.js中寫...
摘要:具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量,接下來使用點(diǎn)語法直接調(diào)用請(qǐng)求下來的值就可以了。 如何向微信小程序?qū)隓EMO源碼: 參考方法 參考學(xué)習(xí)小程序官方文檔 小程序官方文檔 小程序目錄簡介 app.json :設(shè)置一些工程全局的量.js : 寫一些函數(shù)邏輯.wxml: 調(diào)用.js中寫...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會(huì)需要的知識(shí),列在這里,讓大家方便的從零開始學(xué)習(xí)一微信小程序的特點(diǎn)張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應(yīng)用,它出現(xiàn)了觸手可及的夢(mèng)想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會(huì)需要的知識(shí),列在這里,讓大家方便的從零開始學(xué)習(xí); 一:微信小程序的特點(diǎn) 張小龍:張小龍全面闡述小程...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會(huì)需要的知識(shí),列在這里,讓大家方便的從零開始學(xué)習(xí)一微信小程序的特點(diǎn)張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應(yīng)用,它出現(xiàn)了觸手可及的夢(mèng)想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會(huì)需要的知識(shí),列在這里,讓大家方便的從零開始學(xué)習(xí); 一:微信小程序的特點(diǎn) 張小龍:張小龍全面闡述小程...
閱讀 544·2023-04-26 01:39
閱讀 4524·2021-11-16 11:45
閱讀 2624·2021-09-27 13:37
閱讀 900·2021-09-01 10:50
閱讀 3613·2021-08-16 10:50
閱讀 2232·2019-08-30 15:55
閱讀 2996·2019-08-30 15:55
閱讀 2267·2019-08-30 14:07