1. 程式人生 > >微信小程式開發學習筆記001--認識微信小程式,第一個微信小程式

微信小程式開發學習筆記001--認識微信小程式,第一個微信小程式

第一天,認識微信小程式,第一個微信小程式


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"藍色
  }
}
----------------------------