大牛帶您微信小程序基礎
阿新 • • 發佈：2018-08-24
borde get login wxs tostring 找到 timeout justify 窗口 前言
什麽是微信小程序，它是一種輕量級的APP，它與常規App來說，無需下載安裝即可使用，它嵌於微信App中，要使用微信小程序你只需要搜索一下微信小程序的名稱就好，如近期的“Google的畫圖”小程序等，小程序不同於APP一點的是，小程序成本低，前期宣傳，可以靠掃描二維碼，分享群，朋友圈等，來提高微信小程序的使用。無需安裝即可下載的特點，也深受廣大群眾的喜歡。
介紹
小程序是一種用完即走的那麽一種模式，從開始的B2C模式，人與商品，到P2P模式，人與人，在到C2P模式，人與服務。
小程序就是那麽一種人與服務，小程序不用下載？
不是的，只是它的下載很小，你根本體會不到它的下載，而且對於那種要停留下來很久的，小程序一般不適用，對於訂票，購票，小遊戲，等。
如今，小程序的日常應用，如去一家店吃面時，不用叫服務員點餐而是有個二維碼在你的桌上，用你的手機掃一掃就行。
每款開發工具具有調式的功能才會有人支持，微信小程序的調用工具有Console,Sources,Network,Storage,AppData,wxml等，微信小程序上有個調式器的按鈕就是了。
Console的窗口就是用來顯示小程序的輸出的錯誤信息和調式的代碼。
Sources窗口是用來顯示當前項目的腳本文件，看到的這些文件時通過處理後的腳本文件。
Network是用來查看發送的請求信息和調用文件的信息。
Storage窗口是用來顯示當前項目使用wx.setStorage和wx.setStoraeSync的情況。
AppData窗口是用來顯示當前項目，具體詳細，數據情況的。
Wxml窗口是用來幫助開發者開發wxml轉換後的界面，在這可以看到頁面的結構，和wxss的相關屬性，如同在網頁可以查看代碼一樣的。
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
這裏直接復制小程序自動生成的代碼：
//app.js
App({
// 為生命周期的函數
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到後臺換取 openId, sessionKey, unionId
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo‘]) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
// 定義全局的函數
wx.getUserInfo({
success: res => {
// 可以將 res 發送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
})
})
},
// 定義全局的數據
globalData: {
userInfo: null
})
// 配置頁面路徑
"pages":[
"pages/index/index",
"pages/logs/logs"
],
// 配置窗口的表現
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "dashucoding",
"navigationBarTextStyle":"black"
},
// 配置標簽的導航
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "sy"
},{
"pagePath": "pages/logs/logs",
"text": "rz"
}]
},
// 配置網絡超時
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
// 配置debug模式
"debug": true
窗口的表現屬性
表現屬性：狀態欄，導航條，標題，窗口背景
設置導航條的背景顏色：navigationBarBackgroundColor
設置導航條文字：navigationBarTitleText
設置導航條文字顏色：navigationBarTextStyle
設置窗口是否支持下拉刷新：enablePullDownRefresh
設置窗口的背景顏色：backgroundColor
下拉 loading 的樣式，僅支持 dark / light：backgroundTextStyle
默認的全局樣式
/app.wxss/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
工具類文件
// utils.js 存放工具來的文件
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘)
const formatNumber = n => {
n = n.toString()
return n[1] ? n : ‘0‘ + n
// 通過 module.exports 將定義的函數名稱進行註冊，才可以讓其他頁面使用
module.exports = {
formatTime: formatTime
頁面文件
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
邏輯層
小程序的邏輯層編寫類似JavaScript，但是擴充了一些內容，也有的地方有寫變動。主要的App()和Page方法。
App()註冊APP
App() 函數用來註冊一個小程序，接收一個object 參數，用來指定小程序的生命周期函數等。
示例代碼：
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: ‘I am global data‘
})
getApp()方法可以用來獲取到小程序實例。
// other.js
var appInstance = getApp()
// I am global data
console.log(appInstance.globalData)
註意：
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
Page()註冊頁面
函數Page()用來註冊一個頁面，接受一個 Object 參數，其指定頁面的初始數據、生命周期函數和事件處理函數等。
示例代碼：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: ‘Set some data for updating view.‘
}, function() {
// this is setData callback
})
},
customData: {
hi: ‘MINA‘
})
視圖層
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
微信小程序組件
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
微信小程序API
wx.request(OBJECT)發起網絡請求
從網絡上找到一個數據地址：http://www.phonegap100.com/appapi.php?a=getPortalCate
{{value.catname}}
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs‘
})
},
onLoad: function () {
var that = this;
wx.request({
// 開發者服務器接口地址
url: ‘http://www.phonegap100.com/appapi.php?a=getPortalCate‘, //僅為示例，並非真實的接口地址
data: {
// 請求的參數
},
// 有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
method: ‘GET‘,
// 設置請求的 header，header 中不能設置 Referer。
header: {
‘content-type‘: ‘application/json‘ // 默認值
},
// 收到開發者服務成功返回的回調函數
success: function (res) {
// 開發者服務器返回的數據
console.log(res.data)
that.setData({
logs:res.data.result
})
})
})
獲取的數據：
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
文件的上傳，下載
wx.chooseImage(OBJECT)API調用
微信小程序開發上傳圖片功能實例
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
tempFilePaths: ‘‘,
},
/**
* 上傳圖片
*/
chooseimage: function() {
var _this = this;
wx.chooseImage({
count: 1, // 默認9
sizeType: [‘original‘, ‘compressed‘], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定來源是相冊還是相機，默認二者都有
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
success: function(res) {
//提示上傳成功
wx.showToast({
title: ‘上傳成功‘,
icon: ‘success‘,
duration: 2000
});
_this.setData({
tempFilePaths: res.tempFilePaths
})
})
})
WebSocket會話API
利用WebSocket會話可以用來創建一個會話連接，它可以通信，如聊天等。
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
示例代碼：
wx.connectSocket({
url: ‘wss://example.qq.com‘,
data:{
x: ‘‘,
y: ‘‘
},
header:{
‘content-type‘: ‘application/json‘
},
protocols: [‘protocol1‘],
method:"GET"
})
常用的api調用
1.wx.onSocketOpen(CALLBACK)監聽WebSocket連接打開事件
2.wx.onSocketError(CALLBACK)監聽WebSocket錯誤
3.wx.sendSocketMessage(OBJECT)通過 WebSocket連接發送數據
4.wx.onSocketMessage(CALLBACK)監聽WebSocket接受到服務器的消息事件
5.wx.closeSocket(OBJECT)關閉 WebSocket 連接
6.wx.onSocketClose(CALLBACK)監聽WebSocket關閉
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
圖片處理提供的API
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
小編每天會定期更新論文及視頻，希望大家多多關註與支持 每天晚上20：00會在騰訊課堂上分享免費往期幹貨QQ:561487941
什麽是微信小程序，它是一種輕量級的APP，它與常規App來說，無需下載安裝即可使用，它嵌於微信App中，要使用微信小程序你只需要搜索一下微信小程序的名稱就好，如近期的“Google的畫圖”小程序等，小程序不同於APP一點的是，小程序成本低，前期宣傳，可以靠掃描二維碼，分享群，朋友圈等，來提高微信小程序的使用。無需安裝即可下載的特點，也深受廣大群眾的喜歡。
介紹
小程序是一種用完即走的那麽一種模式，從開始的B2C模式，人與商品，到P2P模式，人與人，在到C2P模式，人與服務。
小程序就是那麽一種人與服務，小程序不用下載？
不是的，只是它的下載很小，你根本體會不到它的下載，而且對於那種要停留下來很久的，小程序一般不適用，對於訂票，購票，小遊戲，等。
如今，小程序的日常應用，如去一家店吃面時，不用叫服務員點餐而是有個二維碼在你的桌上，用你的手機掃一掃就行。
微信小程序的招喜特點
微信小程序實現了“×××”的夢想，用戶掃一掃或在微信內部搜一搜就可找到應用即可使用，也體現了“用完即走”的概念，無需下載與安裝，小程序也具有APP應用軟件的大部分實現的功能，無處不在，應用方便，這使得小程序的熱度不同上漲。
微信小程序的使用
這裏微信小程序的使用，開發，可自行百度，自己註冊一個自己的小程序，這很簡單，點擊了解開發內容：微信小程序開發基礎，微信小程序框架與組件，看完即可。
每款開發工具具有調式的功能才會有人支持，微信小程序的調用工具有Console,Sources,Network,Storage,AppData,wxml等，微信小程序上有個調式器的按鈕就是了。
Console的窗口就是用來顯示小程序的輸出的錯誤信息和調式的代碼。
Sources窗口是用來顯示當前項目的腳本文件，看到的這些文件時通過處理後的腳本文件。
Network是用來查看發送的請求信息和調用文件的信息。
Storage窗口是用來顯示當前項目使用wx.setStorage和wx.setStoraeSync的情況。
AppData窗口是用來顯示當前項目，具體詳細，數據情況的。
Wxml窗口是用來幫助開發者開發wxml轉換後的界面，在這可以看到頁面的結構，和wxss的相關屬性，如同在網頁可以查看代碼一樣的。
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
這裏直接復制小程序自動生成的代碼：
//app.js
App({
// 為生命周期的函數
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到後臺換取 openId, sessionKey, unionId
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo‘]) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
// 定義全局的函數
wx.getUserInfo({
success: res => {
// 可以將 res 發送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
})
})
},
// 定義全局的數據
globalData: {
userInfo: null
})
// 配置頁面路徑
"pages":[
"pages/index/index",
"pages/logs/logs"
],
// 配置窗口的表現
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "dashucoding",
"navigationBarTextStyle":"black"
},
// 配置標簽的導航
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "sy"
},{
"pagePath": "pages/logs/logs",
"text": "rz"
}]
},
// 配置網絡超時
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
// 配置debug模式
"debug": true
窗口的表現屬性
表現屬性：狀態欄，導航條，標題，窗口背景
設置導航條的背景顏色：navigationBarBackgroundColor
設置導航條文字：navigationBarTitleText
設置導航條文字顏色：navigationBarTextStyle
設置窗口是否支持下拉刷新：enablePullDownRefresh
設置窗口的背景顏色：backgroundColor
下拉 loading 的樣式，僅支持 dark / light：backgroundTextStyle
默認的全局樣式
/app.wxss/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
工具類文件
// utils.js 存放工具來的文件
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘)
const formatNumber = n => {
n = n.toString()
return n[1] ? n : ‘0‘ + n
// 通過 module.exports 將定義的函數名稱進行註冊，才可以讓其他頁面使用
module.exports = {
formatTime: formatTime
頁面文件
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
邏輯層
小程序的邏輯層編寫類似JavaScript，但是擴充了一些內容，也有的地方有寫變動。主要的App()和Page方法。
App()註冊APP
App() 函數用來註冊一個小程序，接收一個object 參數，用來指定小程序的生命周期函數等。
示例代碼：
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: ‘I am global data‘
})
getApp()方法可以用來獲取到小程序實例。
// other.js
var appInstance = getApp()
// I am global data
console.log(appInstance.globalData)
註意：
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
Page()註冊頁面
函數Page()用來註冊一個頁面，接受一個 Object 參數，其指定頁面的初始數據、生命周期函數和事件處理函數等。
示例代碼：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: ‘Set some data for updating view.‘
}, function() {
// this is setData callback
})
},
customData: {
hi: ‘MINA‘
})
視圖層
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
微信小程序組件
大牛帶您微信小程序基礎
大牛帶您微信小程序基礎
微信小程序API
wx.request(OBJECT)發起網絡請求
從網絡上找到一個數據地址：http://www.phonegap100.com/appapi.php?a=getPortalCate
大牛帶您微信小程序基礎