微信小程序開發測試

微信小程序 在2017-01-09正式上線，本着跟上時代潮流的精神，寫一份教程來看看

微信IDE下載地址為：

微信IDE

在windows下直接 雙擊 exe安裝即可，安裝完成后的界面如下：

得到這個界面直接用微信掃二維碼就可以登陸了，新建項目方法如下：

添加項目

直接點擊下圖的添加項目：

新建項目

AppID 是需要申請才能有的，而且一般是以公司級別的才能申請吧，看了官方文檔是需要這些東西：

有能力的企業可以去這里按照官方文檔申請：

AppID

類似我等 閑雜的小程序員 就選擇 無 AppID

項目名稱 隨意填寫，你開心就好

項目目錄 是一個 文件夾 ，文件夾包含的文件在下面講解：

項目目錄

項目目錄 必須包含結構如下：

-- pages
  -- index
    -- index.js
    -- index.wxml
    -- index.wxss
-- app.js
-- app.json

其中 app.js 里面的代碼為：

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

app.json 里面的代碼為：

{
    "pages":[
        "pages/index/index"
    ],
      "window":{
        "navigationBarBackgroundColor": "#BBDEF8",
        "navigationBarTitleText": "TTyb",
        "navigationBarTextStyle":"white"
        }
}

pages 里面放的相當於一個顯示網頁，wxml 相當於前端的 html 文件，wxss 相當於前端的 css 文件，js 文件就是 js 文件，為了打印出 hello world ，示例如下：

index.js:

var flag = true;
Page({
  data:{
    // text:"這是一個頁面"
    color: "window"
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

index.wxml:

<view>
    <text class="{{color}}">Hello World</text>
</view>

index.wxss:

.window{
    color: #E6CAFF;
}

得到結果如下：

源碼在我的github里面：

TTyb