微信小程式開發學習筆記001--認識微信小程式,第一個微信小程式
阿新 • • 發佈：2019-01-24
第一天,認識微信小程式,第一個微信小程式
1.什麼是微信小程式?
是h5網頁嘛?不是
微信張小龍說:
小程式是一種不需要下載安裝即可使用的應用，
它實現了應用“觸手可及”的夢想，使用者掃一掃或者
搜一下即可開啟應用。也體現了“用完即走”的理念
，使用者不用關心安裝太多應用的問題。應用將無
處不在，所示可用，但又無需安裝解除安裝。
微信小程式存在雲端對吧.
手機app:一般是native程式,比如用java或ios寫的
對吧:需要下載,但是小程式不需要下載.
app分為:
webapp:網頁的應用
native app:用java和ios編寫對吧
react web:
hybrid:
微信小程式:他是微信發明了一種語言
比如他用wxm代替css對吧.
咱們再總結一下看看:
微信小程式是一種:
web的開發方式,但是是native app的開發體驗.
不是HTML5
• 即用即走，隨手可得
• 擁有離線能力:h5的離線儲存功能,聯網的時候可以
看到頁面,離線的時候也可以看到.
有離線儲存功能.
聯網的時候把頁面儲存在手機端.
• 一次開發,多端相容,比如微信的Android/ios:
上都可以應用這個小程式.
怎麼做到的呢?微信的sdk封裝了.
• 優美的操作體驗:
h5的體驗不是那麼好,特別跟native相比較
小程式的體驗,要比h5不錯.
因為他用一些native框架渲染的.
-----------------------------------------
2.環境安裝
下載
https://mp.weixin.qq.com/debug/wxadoc/dev/devt
ools/download.html?t=20161122
下載安裝以後,用微信掃一下才能進入.
進入以後選擇:本地小程式專案
• 選擇對應的系統（win32，win64，mac）安裝
• 開發工具：自帶，sublime Text
自帶就是(微信提供的這個對吧)
• 小程式的外掛安裝
https://github.com/tc-h5/tc-weapp-snippets
這個是一個基於sublime的一個小程式的外掛
好,進去點選右邊:clone or download
這樣就可以了.選擇downloadZIP
tc-weapp-snippets-master.zip
好下載以後,咱們怎麼用?
咱們看看.
1.首先解壓得到:tc-weapp-snippets-master
這個資料夾.然後把這個資料夾放到
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages'
這個資料夾的路徑你可以,開啟sublime然後在選單上
找到preferences-->browser packages
就可以找到這個目錄了-->然後選擇user目錄.
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\User
2.把解壓得到:tc-weapp-snippets-master的資料夾
放到開啟的user資料夾中去.
3.這些是sublime的外掛,裡面都是有什麼呢?
有小程式提供的一些api,還有一些元件.
3.第一個微信小程式
a.點選微信開發工具,然後點選新增專案,
然後選擇填入一個appid,但如果沒有appid的話,
也可以點選右邊的無appid,但是提示部分功能受限
對吧.
b.如何獲取appid:
去官網:
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112
簡易教程-->有介紹如何獲得appid
登入微信:
https://mp.weixin.qq.com/
開發者中心,設定裡,注意,服務號,可以直接看到
訂閱號,只有認證以後可以看到.坑...
-----------------------------
好看看如何開發:
1.好,咱們填寫一下專案名稱:
credemo01
2.然後選擇儲存目錄
3.然後選擇新增專案
開啟介面:
左側是ui,右側是程式碼部分
好,咱們左側選擇編輯,右側會出現程式碼編輯視窗,還有程式碼檔案列表
對吧.不過這個編輯器,好像不如咱們的sublime好用,所以
還是建議大家用sublime開發.
左側還有除錯視窗.
好左側的ui,可以選擇,比如iPhone6..等等.
右側,有wifi,還有2g/3g/4g..這個可以模擬網路情況對吧,測試不同
網路情況下,咱們的專案表現情況.
左側的專案視窗:
點選開啟可以顯示開發目錄.
下面會有:開啟es6轉es5:預設勾選
監聽檔案變化,自動重新整理開發者工具,這個很重要要勾選
開發環境不校驗請求域名以及TLS版本,這個勾選
---------------------------
監聽檔案變化,自動重新整理開發者工具:對於這一項咱們測試一下:
點選左側編輯,點選右側程式碼檔案目錄,選擇pages/index.js/
修改裡面的hello world 刪掉d以後,儲存,可以看到他就自動重新整理了
對吧.
--------------------------
好,開發工具咱們看到這裡,然後咱們看看如何用sublime開發
微信小程式,好,用sublime開啟,剛剛用微信開發工具新建的
專案,比如:
sublime--->open folder-->找到E:\wxworkspace\credemo01
這個資料夾開啟.
好,咱們開啟,找到左側目錄,開啟pages-->index.js-->修改內容,helloworld
改成-->創夢,永不停息,儲存,回到小程式開發工具介面,可以看到
也跟著被改了對吧,所以咱們可以用sublime開發,在微信開發工具中看
效果.
好,介紹一下左側檔案結構:
app.js是寫邏輯的
app.json是配置檔案
app.wxss是小程式的樣式表
好,咱們改改試試:
比如修改:
app.wxss:
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
//修改一下
//padding: 200rpx 0;-->padding: 0rpx 0;
box-sizing: border-box;
}
看看效果,開發工具的左側ui的頭像上去了對吧.
---------------------------------
好,大家注意:
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
以上三個在css中是沒有的,他是微信小程式特有的,叫彈性和佈局
後邊說.flex佈局.
padding: 200rpx 0;//rpx單位,後面說
支付寶是不是也有小程式了?還沒有哈,不過原理掌握了到時候他出
其他的也不在話下.
--------------------------------------------------
好,咱們看看在sublime中開啟,app.js
在裡面我輸入wxapp,回車,就會自動生成程式碼,這個就是
咱們剛開始裝的外掛的作用:
App({
onLaunch: function () {
},
onShow: function () {
},
onHide: function () {
},
globalData: 'I am global data'
});
這段程式碼對吧.這些程式碼是神意思呢?
生命週期對吧,咱們後邊講.
----------------------------------
這裡我在app.js中敲入wxpage回車,也有生成很多程式碼對吧.
Page({
data:{
},
onLoad:function(options){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
--------------------------------
好,左側的utils/util.js是小程式的工具集
左側pages是頁面對吧.
好,咱們怎麼用util.js中的方法呢?
比如,我開啟pages/logs/logs.js
咱們看看:
//logs.js
var util = require('../../utils/util.js')//1.引入工具集
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
//1.util.formatTime(new Date(log))
//uitl.用點的方式使用工具集
})
})
}
})
--------------------------------
好,注意,咱們在sublime中寫的程式碼和微信開發工具中的程式碼是不一樣的
比如:
credemo01/utils/util.js
sublime顯示的:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
微信開發工具中顯示的:
好,咱們點選左側除錯,然後右邊視窗的source,開啟
找到util.js咱們開啟看看:
//1.可以看到這是編譯後的程式碼,他給添加了這樣一句對吧
//
define("utils/util.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,WebSocket,webkit,WeixinJSCore,WeixinJSBridge,Reporter){ 'use strict';
function formatTime(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}
function formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n;
}
module.exports = {
formatTime: formatTime
};
//2.還有這裡
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInV0aWwuanMiXSwibmFtZXMiOlsiZm9ybWF0VGltZSIsImRhdGUiLCJ5ZWFyIiwiZ2V0RnVsbFllYXIiLCJtb250aCIsImdldE1vbnRoIiwiZGF5IiwiZ2V0RGF0ZSIsImhvdXIiLCJnZXRIb3VycyIsIm1pbnV0ZSIsImdldE1pbnV0ZXMiLCJzZWNvbmQiLCJnZXRTZWNvbmRzIiwibWFwIiwiZm9ybWF0TnVtYmVyIiwiam9pbiIsIm4iLCJ0b1N0cmluZyIsIm1vZHVsZSIsImV4cG9ydHMiXSwibWFwcGluZ3MiOiI7O0FBQUEsU0FBU0EsVUFBVCxDQUFvQkMsSUFBcEIsRUFBMEI7QUFDeEIsTUFBSUMsT0FBT0QsS0FBS0UsV0FBTCxFQUFYO0FBQ0EsTUFBSUMsUUFBUUgsS0FBS0ksUUFBTCxLQUFrQixDQUE5QjtBQUNBLE1BQUlDLE1BQU1MLEtBQUtNLE9BQUwsRUFBVjs7QUFFQSxNQUFJQyxPQUFPUCxLQUFLUSxRQUFMLEVBQVg7QUFDQSxNQUFJQyxTQUFTVCxLQUFLVSxVQUFMLEVBQWI7QUFDQSxNQUFJQyxTQUFTWCxLQUFLWSxVQUFMLEVBQWI7O0FBR0EsU0FBTyxDQUFDWCxJQUFELEVBQU9FLEtBQVAsRUFBY0UsR0FBZCxFQUFtQlEsR0FBbkIsQ0FBdUJDLFlBQXZCLEVBQXFDQyxJQUFyQyxDQUEwQyxHQUExQyxJQUFpRCxHQUFqRCxHQUF1RCxDQUFDUixJQUFELEVBQU9FLE1BQVAsRUFBZUUsTUFBZixFQUF1QkUsR0FBdkIsQ0FBMkJDLFlBQTNCLEVBQXlDQyxJQUF6QyxDQUE4QyxHQUE5QyxDQUE5RDtBQUNEOztBQUVELFNBQVNELFlBQVQsQ0FBc0JFLENBQXRCLEVBQXlCO0FBQ3ZCQSxNQUFJQSxFQUFFQyxRQUFGLEVBQUo7QUFDQSxTQUFPRCxFQUFFLENBQUYsSUFBT0EsQ0FBUCxHQUFXLE1BQU1BLENBQXhCO0FBQ0Q7O0FBRURFLE9BQU9DLE9BQVAsR0FBaUI7QUFDZnBCLGNBQVlBO0FBREcsQ0FBakIiLCJmaWxlIjoidW5rbm93biIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIGZvcm1hdFRpbWUoZGF0ZSkge1xuICB2YXIgeWVhciA9IGRhdGUuZ2V0RnVsbFllYXIoKVxuICB2YXIgbW9udGggPSBkYXRlLmdldE1vbnRoKCkgKyAxXG4gIHZhciBkYXkgPSBkYXRlLmdldERhdGUoKVxuXG4gIHZhciBob3VyID0gZGF0ZS5nZXRIb3VycygpXG4gIHZhciBtaW51dGUgPSBkYXRlLmdldE1pbnV0ZXMoKVxuICB2YXIgc2Vjb25kID0gZGF0ZS5nZXRTZWNvbmRzKClcblxuXG4gIHJldHVybiBbeWVhciwgbW9udGgsIGRheV0ubWFwKGZvcm1hdE51bWJlcikuam9pbignLycpICsgJyAnICsgW2hvdXIsIG1pbnV0ZSwgc2Vjb25kXS5tYXAoZm9ybWF0TnVtYmVyKS5qb2luKCc6Jylcbn1cblxuZnVuY3Rpb24gZm9ybWF0TnVtYmVyKG4pIHtcbiAgbiA9IG4udG9TdHJpbmcoKVxuICByZXR1cm4gblsxXSA/IG4gOiAnMCcgKyBuXG59XG5cbm1vZHVsZS5leHBvcnRzID0ge1xuICBmb3JtYXRUaW1lOiBmb3JtYXRUaW1lXG59XG4iXX0=
});
其實sublime中顯示的編譯之前的,咱們要注意sublime和微信開發工具中
編譯後的程式碼是不一樣的對吧.
而且注意,結構好像也不一樣了:
比如:sublime中結構:
credemo01
pages
index
index.js
index.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
utils
util.js
app.js
app.json
app.wxss
---------------------
而微信開發工具的結構是:
注意先選擇左側的編譯:
pages
index
index.js
index.js[sm]
logs
logs.js
logs.js[sm]
utils
util.js
util.js[sm]
appservice
WAService.js
app.js[sm]
asdebug.js
這樣的對吧,這是編譯後的程式碼,咱們看跟sublime中的是不一樣的.
-------------------------------
好,咱們回過來看:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",//1.這裡指定的是介面
//上的標題,可以修改儲存下試試:
//WeChat-->WeChat123
"navigationBarTextStyle":"black"
}
}
可以看到變了對吧WeChat123
--------------------------------
再看看:
pages/index/index.js
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
motto: '創夢,永不停息',
//1.motto: '創夢,永不停息',
//改成text: '創夢,永不停息',
userInfo: {}
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//呼叫應用例項的方法獲取全域性資料
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
}
})
----------------------------------
pages/index/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">{{text}}</text>
//2.<text class="user-motto">{{motto}}</text>
//改成:
// <text class="user-motto">{{text}}</text>
//可以看到也可以對吧.
//這兩個地方是對應起來的.
//
</view>
</view>
-------------------------------------------
再比如:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
//1.修改一下背景顏色
//"navigationBarBackgroundColor": "#fff",-->
//"navigationBarBackgroundColor": "#dfdfdf",
//看看有效果了對吧.
//在sublime中改,在微信開發工具中效果
//
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
---------------------------------
再看我改改標題:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一個微信小程式",
"navigationBarTextStyle":"black"
}
}
看看效果
----------------------------------------------------
字型顏色改改:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一個微信小程式",
"navigationBarTextStyle":"black"
//1."navigationBarTextStyle":"black"
//-->"navigationBarTextStyle":"blue"藍色
}
}
----------------------------
1.什麼是微信小程式?
是h5網頁嘛?不是
微信張小龍說:
小程式是一種不需要下載安裝即可使用的應用，
它實現了應用“觸手可及”的夢想，使用者掃一掃或者
搜一下即可開啟應用。也體現了“用完即走”的理念
，使用者不用關心安裝太多應用的問題。應用將無
處不在，所示可用，但又無需安裝解除安裝。
微信小程式存在雲端對吧.
手機app:一般是native程式,比如用java或ios寫的
對吧:需要下載,但是小程式不需要下載.
app分為:
webapp:網頁的應用
native app:用java和ios編寫對吧
react web:
hybrid:
微信小程式:他是微信發明了一種語言
比如他用wxm代替css對吧.
咱們再總結一下看看:
微信小程式是一種:
web的開發方式,但是是native app的開發體驗.
不是HTML5
• 即用即走，隨手可得
• 擁有離線能力:h5的離線儲存功能,聯網的時候可以
看到頁面,離線的時候也可以看到.
有離線儲存功能.
聯網的時候把頁面儲存在手機端.
• 一次開發,多端相容,比如微信的Android/ios:
上都可以應用這個小程式.
怎麼做到的呢?微信的sdk封裝了.
• 優美的操作體驗:
h5的體驗不是那麼好,特別跟native相比較
小程式的體驗,要比h5不錯.
因為他用一些native框架渲染的.
-----------------------------------------
2.環境安裝
下載
https://mp.weixin.qq.com/debug/wxadoc/dev/devt
ools/download.html?t=20161122
下載安裝以後,用微信掃一下才能進入.
進入以後選擇:本地小程式專案
• 選擇對應的系統（win32，win64，mac）安裝
• 開發工具：自帶，sublime Text
自帶就是(微信提供的這個對吧)
• 小程式的外掛安裝
https://github.com/tc-h5/tc-weapp-snippets
這個是一個基於sublime的一個小程式的外掛
好,進去點選右邊:clone or download
這樣就可以了.選擇downloadZIP
tc-weapp-snippets-master.zip
好下載以後,咱們怎麼用?
咱們看看.
1.首先解壓得到:tc-weapp-snippets-master
這個資料夾.然後把這個資料夾放到
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages'
這個資料夾的路徑你可以,開啟sublime然後在選單上
找到preferences-->browser packages
就可以找到這個目錄了-->然後選擇user目錄.
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\User
2.把解壓得到:tc-weapp-snippets-master的資料夾
放到開啟的user資料夾中去.
3.這些是sublime的外掛,裡面都是有什麼呢?
有小程式提供的一些api,還有一些元件.
3.第一個微信小程式
a.點選微信開發工具,然後點選新增專案,
然後選擇填入一個appid,但如果沒有appid的話,
也可以點選右邊的無appid,但是提示部分功能受限
對吧.
b.如何獲取appid:
去官網:
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112
簡易教程-->有介紹如何獲得appid
登入微信:
https://mp.weixin.qq.com/
開發者中心,設定裡,注意,服務號,可以直接看到
訂閱號,只有認證以後可以看到.坑...
-----------------------------
好看看如何開發:
1.好,咱們填寫一下專案名稱:
credemo01
2.然後選擇儲存目錄
3.然後選擇新增專案
開啟介面:
左側是ui,右側是程式碼部分
好,咱們左側選擇編輯,右側會出現程式碼編輯視窗,還有程式碼檔案列表
對吧.不過這個編輯器,好像不如咱們的sublime好用,所以
還是建議大家用sublime開發.
左側還有除錯視窗.
好左側的ui,可以選擇,比如iPhone6..等等.
右側,有wifi,還有2g/3g/4g..這個可以模擬網路情況對吧,測試不同
網路情況下,咱們的專案表現情況.
左側的專案視窗:
點選開啟可以顯示開發目錄.
下面會有:開啟es6轉es5:預設勾選
監聽檔案變化,自動重新整理開發者工具,這個很重要要勾選
開發環境不校驗請求域名以及TLS版本,這個勾選
---------------------------
監聽檔案變化,自動重新整理開發者工具:對於這一項咱們測試一下:
點選左側編輯,點選右側程式碼檔案目錄,選擇pages/index.js/
修改裡面的hello world 刪掉d以後,儲存,可以看到他就自動重新整理了
對吧.
--------------------------
好,開發工具咱們看到這裡,然後咱們看看如何用sublime開發
微信小程式,好,用sublime開啟,剛剛用微信開發工具新建的
專案,比如:
sublime--->open folder-->找到E:\wxworkspace\credemo01
這個資料夾開啟.
好,咱們開啟,找到左側目錄,開啟pages-->index.js-->修改內容,helloworld
改成-->創夢,永不停息,儲存,回到小程式開發工具介面,可以看到
也跟著被改了對吧,所以咱們可以用sublime開發,在微信開發工具中看
效果.
好,介紹一下左側檔案結構:
app.js是寫邏輯的
app.json是配置檔案
app.wxss是小程式的樣式表
好,咱們改改試試:
比如修改:
app.wxss:
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
//修改一下
//padding: 200rpx 0;-->padding: 0rpx 0;
box-sizing: border-box;
}
看看效果,開發工具的左側ui的頭像上去了對吧.
---------------------------------
好,大家注意:
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
以上三個在css中是沒有的,他是微信小程式特有的,叫彈性和佈局
後邊說.flex佈局.
padding: 200rpx 0;//rpx單位,後面說
支付寶是不是也有小程式了?還沒有哈,不過原理掌握了到時候他出
其他的也不在話下.
--------------------------------------------------
好,咱們看看在sublime中開啟,app.js
在裡面我輸入wxapp,回車,就會自動生成程式碼,這個就是
咱們剛開始裝的外掛的作用:
App({
onLaunch: function () {
},
onShow: function () {
},
onHide: function () {
},
globalData: 'I am global data'
});
這段程式碼對吧.這些程式碼是神意思呢?
生命週期對吧,咱們後邊講.
----------------------------------
這裡我在app.js中敲入wxpage回車,也有生成很多程式碼對吧.
Page({
data:{
},
onLoad:function(options){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
--------------------------------
好,左側的utils/util.js是小程式的工具集
左側pages是頁面對吧.
好,咱們怎麼用util.js中的方法呢?
比如,我開啟pages/logs/logs.js
咱們看看:
//logs.js
var util = require('../../utils/util.js')//1.引入工具集
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
//1.util.formatTime(new Date(log))
//uitl.用點的方式使用工具集
})
})
}
})
--------------------------------
好,注意,咱們在sublime中寫的程式碼和微信開發工具中的程式碼是不一樣的
比如:
credemo01/utils/util.js
sublime顯示的:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
微信開發工具中顯示的:
好,咱們點選左側除錯,然後右邊視窗的source,開啟
找到util.js咱們開啟看看:
//1.可以看到這是編譯後的程式碼,他給添加了這樣一句對吧
//
define("utils/util.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,WebSocket,webkit,WeixinJSCore,WeixinJSBridge,Reporter){ 'use strict';
function formatTime(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}
function formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n;
}
module.exports = {
formatTime: formatTime
};
//2.還有這裡
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInV0aWwuanMiXSwibmFtZXMiOlsiZm9ybWF0VGltZSIsImRhdGUiLCJ5ZWFyIiwiZ2V0RnVsbFllYXIiLCJtb250aCIsImdldE1vbnRoIiwiZGF5IiwiZ2V0RGF0ZSIsImhvdXIiLCJnZXRIb3VycyIsIm1pbnV0ZSIsImdldE1pbnV0ZXMiLCJzZWNvbmQiLCJnZXRTZWNvbmRzIiwibWFwIiwiZm9ybWF0TnVtYmVyIiwiam9pbiIsIm4iLCJ0b1N0cmluZyIsIm1vZHVsZSIsImV4cG9ydHMiXSwibWFwcGluZ3MiOiI7O0FBQUEsU0FBU0EsVUFBVCxDQUFvQkMsSUFBcEIsRUFBMEI7QUFDeEIsTUFBSUMsT0FBT0QsS0FBS0UsV0FBTCxFQUFYO0FBQ0EsTUFBSUMsUUFBUUgsS0FBS0ksUUFBTCxLQUFrQixDQUE5QjtBQUNBLE1BQUlDLE1BQU1MLEtBQUtNLE9BQUwsRUFBVjs7QUFFQSxNQUFJQyxPQUFPUCxLQUFLUSxRQUFMLEVBQVg7QUFDQSxNQUFJQyxTQUFTVCxLQUFLVSxVQUFMLEVBQWI7QUFDQSxNQUFJQyxTQUFTWCxLQUFLWSxVQUFMLEVBQWI7O0FBR0EsU0FBTyxDQUFDWCxJQUFELEVBQU9FLEtBQVAsRUFBY0UsR0FBZCxFQUFtQlEsR0FBbkIsQ0FBdUJDLFlBQXZCLEVBQXFDQyxJQUFyQyxDQUEwQyxHQUExQyxJQUFpRCxHQUFqRCxHQUF1RCxDQUFDUixJQUFELEVBQU9FLE1BQVAsRUFBZUUsTUFBZixFQUF1QkUsR0FBdkIsQ0FBMkJDLFlBQTNCLEVBQXlDQyxJQUF6QyxDQUE4QyxHQUE5QyxDQUE5RDtBQUNEOztBQUVELFNBQVNELFlBQVQsQ0FBc0JFLENBQXRCLEVBQXlCO0FBQ3ZCQSxNQUFJQSxFQUFFQyxRQUFGLEVBQUo7QUFDQSxTQUFPRCxFQUFFLENBQUYsSUFBT0EsQ0FBUCxHQUFXLE1BQU1BLENBQXhCO0FBQ0Q7O0FBRURFLE9BQU9DLE9BQVAsR0FBaUI7QUFDZnBCLGNBQVlBO0FBREcsQ0FBakIiLCJmaWxlIjoidW5rbm93biIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIGZvcm1hdFRpbWUoZGF0ZSkge1xuICB2YXIgeWVhciA9IGRhdGUuZ2V0RnVsbFllYXIoKVxuICB2YXIgbW9udGggPSBkYXRlLmdldE1vbnRoKCkgKyAxXG4gIHZhciBkYXkgPSBkYXRlLmdldERhdGUoKVxuXG4gIHZhciBob3VyID0gZGF0ZS5nZXRIb3VycygpXG4gIHZhciBtaW51dGUgPSBkYXRlLmdldE1pbnV0ZXMoKVxuICB2YXIgc2Vjb25kID0gZGF0ZS5nZXRTZWNvbmRzKClcblxuXG4gIHJldHVybiBbeWVhciwgbW9udGgsIGRheV0ubWFwKGZvcm1hdE51bWJlcikuam9pbignLycpICsgJyAnICsgW2hvdXIsIG1pbnV0ZSwgc2Vjb25kXS5tYXAoZm9ybWF0TnVtYmVyKS5qb2luKCc6Jylcbn1cblxuZnVuY3Rpb24gZm9ybWF0TnVtYmVyKG4pIHtcbiAgbiA9IG4udG9TdHJpbmcoKVxuICByZXR1cm4gblsxXSA/IG4gOiAnMCcgKyBuXG59XG5cbm1vZHVsZS5leHBvcnRzID0ge1xuICBmb3JtYXRUaW1lOiBmb3JtYXRUaW1lXG59XG4iXX0=
});
其實sublime中顯示的編譯之前的,咱們要注意sublime和微信開發工具中
編譯後的程式碼是不一樣的對吧.
而且注意,結構好像也不一樣了:
比如:sublime中結構:
credemo01
pages
index
index.js
index.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
utils
util.js
app.js
app.json
app.wxss
---------------------
而微信開發工具的結構是:
注意先選擇左側的編譯:
pages
index
index.js
index.js[sm]
logs
logs.js
logs.js[sm]
utils
util.js
util.js[sm]
appservice
WAService.js
app.js[sm]
asdebug.js
這樣的對吧,這是編譯後的程式碼,咱們看跟sublime中的是不一樣的.
-------------------------------
好,咱們回過來看:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",//1.這裡指定的是介面
//上的標題,可以修改儲存下試試:
//WeChat-->WeChat123
"navigationBarTextStyle":"black"
}
}
可以看到變了對吧WeChat123
--------------------------------
再看看:
pages/index/index.js
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
motto: '創夢,永不停息',
//1.motto: '創夢,永不停息',
//改成text: '創夢,永不停息',
userInfo: {}
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//呼叫應用例項的方法獲取全域性資料
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
}
})
----------------------------------
pages/index/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">{{text}}</text>
//2.<text class="user-motto">{{motto}}</text>
//改成:
// <text class="user-motto">{{text}}</text>
//可以看到也可以對吧.
//這兩個地方是對應起來的.
//
</view>
</view>
-------------------------------------------
再比如:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
//1.修改一下背景顏色
//"navigationBarBackgroundColor": "#fff",-->
//"navigationBarBackgroundColor": "#dfdfdf",
//看看有效果了對吧.
//在sublime中改,在微信開發工具中效果
//
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
---------------------------------
再看我改改標題:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一個微信小程式",
"navigationBarTextStyle":"black"
}
}
看看效果
----------------------------------------------------
字型顏色改改:
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一個微信小程式",
"navigationBarTextStyle":"black"
//1."navigationBarTextStyle":"black"
//-->"navigationBarTextStyle":"blue"藍色
}
}
----------------------------