動手寫第一個微信小程式
微信小程式開放公測了,目前公測面向的使用者主要是政府、企業、組織,暫時不對個人開發者開放註冊。
註冊請前往微信公眾平臺註冊
微信小程式註冊
下載微信web開發者工具並開啟quickStart工程(提供獲取當前登入賬號的功能),可以看到編輯和除錯的介面
點選開發者工具左側導航的“編輯”,我們可以看到這個專案,已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的,是app.js、app.json、app.wxss這三個。
其中,.js字尾的是指令碼檔案,.json字尾的檔案是配置檔案,.wxss字尾的是樣式表文件。微信小程式會讀取這些檔案,並生成小程式例項。
app.js
app.js是指令碼檔案,主要處理了生命週期函式和全域性變數。API中提供了一些常用功能和框架,包括網路、媒體、資料、位置等內容
在媒體內容中,對圖片、視訊、音訊都做了封裝,這一點實在是太棒了,像從本地相簿選擇圖片和相機拍照就很有用。
app.json
app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成,配置小程式的視窗背景色,配置導航條樣式,配置預設標題。注意該檔案不可新增任何註釋。
app.json和Android Manifest類似,都配置了頁面組成及主題,程式碼結構簡單清晰。
{
"pages":[
"pages/index/index" ,
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss
app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
就是公共style檔案,對頁面風格的統一規範很有幫助。
建立頁面
每一個小程式頁面是由同路徑下同名(比如index頁面)的四個不同字尾檔案的組成,如:index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案,.json字尾的檔案是配置檔案,.wxss字尾的是樣式表文件,.wxml字尾的檔案是頁面結構檔案。
index.wxml 是頁面的結構檔案:
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
本例中使用了、、來搭建頁面結構,繫結資料和互動處理函式。
index.js 是頁面的指令碼檔案,在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項,宣告並處理資料,響應頁面互動事件等。
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//呼叫應用例項的方法獲取全域性資料
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
}
})
index.wxss 是頁面的樣式表:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
頁面的樣式表是非必要的。當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構檔案中直接使用 app.wxss 中指定的樣式規則。即具體頁面樣式優先,公共樣式次之。
index.json 是頁面的配置檔案:
頁面的配置檔案是非必要的。當有頁面的配置檔案時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案,則在該頁面直接使用 app.json 中的預設配置。
現在來看看quickStart除了index以外的另外一個頁面
logs 頁面的頁面結構
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
logs 頁面使用 控制標籤來組織程式碼,在 上使用 wx:for 繫結 logs 資料,並將 logs 資料迴圈展開節點
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
到此,基本可以瞭解微信小程式的的開發流程。
後續的功能可能會因為沒有註冊而無法支援,我會去嘗試哪些模組可以使用,開發完成後再更新部落格分享。
相關推薦
動手寫第一個微信小程式
微信小程式開放公測了,目前公測面向的使用者主要是政府、企業、組織,暫時不對個人開發者開放註冊。 註冊請前往微信公眾平臺註冊 微信小程式註冊 下載微信web開發者工具並開啟quickStart工程(提供獲取當前登入賬號的功能),可以看到編輯和除錯的介面
1-微信小程式開發(安裝軟體和執行第一個微信小程式)
https://developers.weixin.qq.com/miniprogram/dev/ 我的 &nbs
編寫我的第一個微信小程式
最近在學習微信小程式也算是入門級別的,於是乎跟著學習了下,下面簡單的展示下自己做的第一個小程式介面 簡單介紹下,初次使用微
我的第一個微信小程式
今年國慶假期的時候,在家裡帶寶寶。想下載一個哄寶寶玩的遊戲,從 App Store上搜索了一圈,發現評分高的基本上都是收費的。因為App Store上有限免機制,所以就萌發了做一款關注限免應用的小程式。 學習調研 4月份的時候,幫助同事開發了一款小程式,因為當時時間比較急,就用了第三方快速開發框架 mpvue
4分鐘手把手教你做出第一個微信小程式
關於如何開發自己第一個程式,上一篇我釋出了圖文版本,有的閣友自己說沒能實現,我也擔心看圖實在會讓大家感覺不直觀,所以我花了點時間做了一個教學視訊,希望能繼續幫助到對微信小程式感興趣的人。用了愛剪輯稍微做
微信小程式開發學習筆記001--認識微信小程式,第一個微信小程式
第一天,認識微信小程式,第一個微信小程式 1.什麼是微信小程式? 是h5網頁嘛?不是 微信張小龍說: 小程式是一種不需要下載安裝即可使用的應用, 它實現了應用“觸手可及”的夢想,使用者掃一掃或者 搜一下即可開啟應用。也體現了“用完即走”的理念 ,使用者不用關心安裝太多應用的
第一個微信小程式
序言 作為一個工作3年多的iOS開發者,當推出微信公眾號時,自己就有很大的緊迫感,感覺自己的工作會不會被取代,看了一段時間,發現自己要學的太多,自己的工作也挺忙的,慢慢的就淡忘了,感覺對自己的工作也不會有太多的影響。直到2017年1月份微信又推出了小程式,小程式的流暢度
第一個微信小程式之Hello World
概述 在小程式賬號註冊完整流程一文中詳細介紹瞭如何註冊一個小程式賬號。下面我們介紹一下如何開發一個Hello World的小程式。 微信開發者工具下載 1、點選【文件】連結 2、點選【開發】連結,在彈出的選項中,選擇【小程式開發】
傻瓜式教程“第一個微信小程式”
一、下載小程式開發工具 登入“微信公眾平臺”官網,點選小程式中的“開發” 點選“工具” 點選左下角“下載” 根據自己對應的系統下載,我的電腦是windows 64位,所以下載64位 自己選擇好要儲存的路徑,這裡我選擇了放在桌面 二
微信小程式學習日誌:建立第一個微信小程式
首先,在已有小程式賬號和填寫完基本資訊的前提下,開啟微信開發者工具,點選小程式專案然後出現下圖所示視窗,在專案目錄裡填上你所期望的小程式根目錄,如果這一欄不填,開發工具會自動新增一個根目錄,建議自己設定根目錄比較好;AppID填寫在小程式微信公眾平臺開發設定中找的小程式id;
我的第一個微信小程序-DCL每日查看 開發總結
eui QQ git load 博客園 哪些 關鍵字 psi 功能 之前一直在做iOS平臺的App和SDK開發,發現微信小程序還蠻有意思的,花了將近幾天的時間,從看書學習到萌發想法,最後開發出一款小應用,現在花點時間總結一番!作為自我勉勵和後續繼續學習動力~ 先上效果圖:
不管什麼手機,擁有這4個微信小程式就無敵了!
如果你知道微信,還不知道微信小程式就out啦,自從微信小程式跳一跳火了之後,帶動了不少小程式的發展,其中,這4個微信小程式非常強大,無需下載,無需安裝,搜一搜就能用啦,不管你是什麼手機,擁有就無敵了。 1. 最近文件隨身 一個分享文件的工具,是我偶然間發現的,可
130個微信小程式原始碼資源免費領取
為了感恩大家長久以來的關注和支援,小編準備了一些福利,整理了包含前端,Java,產品經理,微信小程式,Python,網站原始碼,Android應用視訊教程,微信公眾平臺開發教程及材料等資源合集大放送。 重要的話說三遍,感恩大回饋,超有價值的學習資料免費送!免費領取! 如果需要學習視訊,歡迎關
130個微信小程式原始碼demo,拿來就可以跑起來的小程式
微信小程式未來也將會是個趨勢,在現在這個時代,安卓手機使用者寧願先從微信裡面去搜一下是否有這個軟體,這個軟體是否值得安裝也不願意開啟手機應用商店去下載應用。 其中有以下兩個主要原因: 第一,使用者的惰性警惕性越來越高,現在的手機APP動不動就要獲取使用者的全部許可權,本
600多個微信小程式原始碼涵蓋各個行業大部分帶後臺持續更新中
今天把本人花費一個月左右整理的600多款小程式原始碼釋出出來,以後每個月還會持續更新,很大一部分都帶有後臺原始碼幷包含有小程式上線教程,幫你分分鐘上線自己的小程式,下面我們來看看目錄截圖,最後面會把原始碼目錄以文字的形式匯出來,這樣你可以在網頁上搜索單個想要的小程式原
給和我一樣的初學者分享個微信小程式.WXSS使用background引入背景圖的辦法
因為專案的緣故,我最近開始學小程式。初入小程式就遇見了個問題,就是在引入背景圖片的時候會出現,下圖的錯誤: 看了錯誤後才發現,原來微信小程式在引入背景圖時需要將圖片格式轉一下,並不是說是我的路徑出現問題了。為了將圖片格式專成base64。現在給所
【好福利】分享100多個微信小程式原始碼
2017年1月9號,中國網際網路世界發生了一件重要事件:凌晨0點,微信小程式正式和我們大夥見面了,從此以後,我們都可以開發屬於我們自己的微信小程式了。 這不,微信小程式正式和大家一見面,市面上就有很多開源的微信小程式了,這裡給大家奉上100多個微信小程式原始碼
100多個微信小程式程式碼免費送
所有資源均來自網際網路公開渠道蒐集,僅供學習交流之用,版權歸原作者所有。連結: https://pan.baidu.com/s/1PyFC-v9bDdZRBsVXJwyalg 密碼: 8834補充:微信小程式官方Demo(Hao-Wu/WeApp-Demo)微信小應用示例程式
業餘時間折騰了個微信小程式版本的街機遊戲模擬器(吾愛街機),8090後的童年回憶,歡迎大家體驗
好多年沒來部落格園了,有段時間想玩街機遊戲,發現都需要下載安裝,現在小程式這麼流行,是不是可以整合到小程式裡(無需下載,線上玩),出於這想法,就業餘時間折騰了下,分享給大家,偶爾可以回味暢玩下。 中間遇到了不少坑(就不具體說了),總算還是堅持下來了,還有很多細節有待優化,這裡得感謝各位模擬器前輩及大神們打下的
用Taro做個微信小程式Todo, 小白工作記錄
微信小程式框架: Taro 做微信小程式的框架, 幾個比較主流的: 官方的WePY: https://tencent.github.io/wepy/document.html#/ 美團的mpvue: http://mpvue.com/mpvue/#-html 京東的Taro: https://taro.ao