小程序官方示例demo學習兩大功能點
2017年6月14日，小程序官方示例demo已經是當下最熱門的話題，下面將從多方面來談談小程序官方示例demo學習兩大功能點相關的內容。
6月14日消息，據彭博社報道，為了與新東家沃爾瑪（Walmart）融合得更加順暢，Jet.com（去年8月被沃爾瑪以33億美元收購）正計劃逐步剔除自己平臺上所售的Costco旗下品牌產品。
6月18日，永輝將在福州開出第一家永輝生活店。值得注意的是，這也是永輝首家24小時營業門店。據了解，這家24小時門店商品由永輝物流統一配送，沒有熟食但提供蔬菜水果以及冷凍冰鮮類商品。
這個demo，應該是作者的練習demo，表面上并沒有展示完全；
結構圖：
其中微信涂鴉部分預覽圖：
其中微信涂鴉部分預覽圖：
示例代碼：
Page({
data:{
pen : 3, //畫筆粗細默認值
color : '#cc0033' //畫筆顏色默認值
},
startX: 0, //保存X坐標軸變量
startY: 0, //保存Y坐標軸變量
isClear : false, //是否啟用橡皮擦標記
//手指觸摸動作開始
touchStart: function (e) {
//得到觸摸點的坐標
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createContext()
if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫畫
this.context.setStrokeStyle('#FFFFFF') //設置線條樣式 此處設置為畫布的背景顏色 橡皮擦原理就是：利用擦過的地方被填充為畫布的背景顏色一致 從而達到橡皮擦的效果
this.context.setLineCap('round') //設置線條端點的樣式
this.context.setLineJoin('round') //設置兩線相交處的樣式
this.context.setLineWidth(20) //設置線條寬度
this.context.save(); //保存當前坐標軸的縮放、旋轉、平移信息
this.context.beginPath() //開始一個路徑
this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一個弧形路徑到當前路徑，順時針繪制 這里總共畫了360度 也就是一個圓形
this.context.fill(); //對當前路徑進行填充
this.context.restore(); //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
}else{
this.context.setStrokeStyle(this.data.color)
this.context.setLineWidth(this.data.pen)
this.context.setLineCap('round') // 讓線條圓潤
this.context.beginPath()
}
},
//手指觸摸后移動
touchMove: function (e) {
var startX1 = e.changedTouches[0].x
var startY1 = e.changedTouches[0].y
if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫畫
this.context.save(); //保存當前坐標軸的縮放、旋轉、平移信息
this.context.moveTo(this.startX,this.startY); //把路徑移動到畫布中的指定點，但不創建線條
this.context.lineTo(startX1,startY1); //添加一個新點，然后在畫布中創建從該點到最后指定點的線條
this.context.stroke(); //對當前路徑進行描邊
this.context.restore() //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
this.startX = startX1;
this.startY = startY1;
}else{
this.context.moveTo(this.startX, this.startY)
this.context.lineTo(startX1, startY1)
this.context.stroke()
this.startX = startX1;
this.startY = startY1;
}
//只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個
wx.drawCanvas({
canvasId: 'myCanvas',
reserve: true,
actions: this.context.getActions() // 獲取繪圖動作數組
})
},
//手指觸摸動作結束
touchEnd: function () {
},
//啟動橡皮擦方法
clearCanvas: function(){
if(this.isClear){
this.isClear = false;
}else{
this.isClear = true;
}
},
penSelect: function(e){ //更改畫筆大小的方法
console.log(e.currentTarget);
this.setData({pen:parseInt(e.currentTarget.dataset.param)});
this.isClear = false;
},
colorSelect: function(e){ //更改畫筆顏色的方法
console.log(e.currentTarget);
this.setData({color:e.currentTarget.dataset.param});
this.isClear = false;
},
// 下拉刷新
onPullDownRefresh: function(){
wx.stopPullDownRefresh()
},
// 頁面分享
onShareAppMessage: function () {
return {
title: '微信小程序',
desc: '這是微信小程序的分享功能',
path: '/page/canvas'
}
}
})
-
微信小程序商城系統開發其實很簡單
微信小程序商城系統開發其實很簡單，只需要五步就可以完成，整個過程包括開發、上線、發布都可以輕松搞定...詳情
-
微信小程序商城系統免費注冊體驗
微信小程序商城系統免費注冊體驗，接下來是微信小程序的時代，這一波紅利在不抓住互聯網就再也沒什么機會了...詳情
想了解更多微信小程序開發和微信小程序大全都可以進入微信小程序商城系統開發了解。
第二部分：如何開通一個小商店
- 關注官方公眾號 -
咨詢電話：4006-089-731