微信小程序

 小程序配置 app.jso

app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。

而寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。

微信app.json裏面的配置項參考文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

 

工具配置 project.config.json

一般你們在使用一個工具的時候，都會針對各自喜愛作一些個性化配置，例如界面顏色、編譯配置等等，當你換了另一臺電腦從新安裝工具的時候，你還要從新配置。

考慮到這點，小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json，你在工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

其餘配置項細節能夠參考文檔 開發者工具的配置 。

 

前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。須要注意的是：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

 

公共的屬性和方法能夠寫在app.js中，在其餘的js文件中能夠隨意調用。

var app = getApp();

app.globalData.pass;

 

block是一個包裝元素，在頁面中是不會被渲染出來的，用來包裝一些代碼而已！

<view>
  <block wx:for='{{items}}' wx:for-item='item' wx:key='index'>
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>

 

模板：（定義和調用）

<template name='tmp'>
  <view>
    <view>收件人：{{name}}</view>
    <view>聯繫方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>

<template is='tmp' data='{{...item}}'></template>

 

import引入外部模板文件中的模板片斷：

index.wxml引入模板片斷::
<import src='../a/a' />
<template is='hello'></template>

a.wxml模板文件::
<view>hello world</view>
<template name='hello'>HELLO WORLD!</template>

結果會輸出HELLO WORLD!

 

include引入，除了模板外的全部都copy到當前文件（必定要注意標籤的閉合，不然會報錯！！！）：

<include src='../a/a.wxml' /> 

 

屏幕尺寸爲750rpx，從而根據屏幕寬度來進行自適應，rpx實現原理和rem實現原理是很類似的，rpx其實最後也是轉換成了rem

rpx是響應式像素

 

wxss支持外聯樣式的導入：@import

// index.wxss

@import '../a/a.wxss';

.container{
  border: 1rpx solid black;
}

// a.wxss
.container{
  color: red;
}

 

也支持內聯樣式：

<view style='color:yellow;border:1rpx solid green;'>我是經過內聯樣式改變的哦</view>

 

wxs腳本語言的基本特性：

使用wxs作一個過濾和計算處理來使用

wxs的模塊特性，使用一個標籤來聲明，也能夠經過一個文件來聲明，文件須要命名爲.wxs後綴，在wxs文件裏有他本身獨立的做用域，wxs的模塊名經過module來定義，wxs模塊內的屬性和變量對外都是不可見的，經過module.exports將他們暴露出來供外部使用。

wxs就是對JavaScript腳本語言上層作了一些封裝和限制。

<wxs module='m3'>
  var v = 1;
  module.exports.value = v;
  // 單行註釋
  /*
    多行註釋
  */
  console.log(v);
</wxs>
<view>{{m3.value}}</view>

 

點擊事件：

clickMe(e){
    console.log(e);
}

<view bindtap='clickMe'>點擊我</view>