百度app下載：http://mo.baidu.com/

開發工具下載：https://smartprogram.baidu.com/docs/develop/devtools/history/

一、小程序全局配置App()

1、app.json

{// 設置頁面路徑的數組"pages": ["component/component","api/api"], // 分包結構配置"subPackages": [{"root": "subpackage","pages": ["pages/subpageone/subpageone","pages/subpagetwo/subpagetwo"]}],// 設置頁面展現"window": {// 導航欄標題文字內容"navigationBarTitleText": "Demo",// 導航欄背景色"navigationBarBackgroundColor": "#000000",// 導航欄標題顏色 balck/white"navigationBarTextStyle": "white",// 導航欄樣式 default/custom"navigationStyle": "default",// 自定義導航欄custom的組件定義"usingComponents": {"nav-bar": "/components/navBar/navBar","content": "/components/content/content"},// 背景顏色"backgroundColor": "#ffffff",// 下拉背景字體、loading圖的樣式 dark/light"backgroundTextStyle": "dark",// 頂部窗口的背景色 僅IOS支持"backgroundColorTop": "#ffffff",// 底部窗口的背景色 僅IOS支持"backgroundColorBottom": "#ffffff",// 是否開啟下拉刷新"enablePullDownRefresh": "true",// 頁面上拉觸底事件時距頁面底部距離（px）"onReachBottomDistance":"50",// 小程序頁面是否禁止響應字體大小的設置 auto(響應)、none(不響應)"textSizeAdjust": "auto"// 小程序頁面方向 portrait(默認為豎屏顯示)、landscape(橫屏顯示)、auto(跟隨系統方向顯示)"pageOrientation": "auto"},// 分包預下載規則"preloadRule": {"pages/index": {"network": "all","packages": ["subpackage"]}},// 底部tab欄的表現"tabBar": {// tab列表"list": [{"pagePath": "component/component","text": "首頁","iconPath": "/images/API_normal.png","selectedIconPath": "/images/API_selected.png"},{"pagePath": "api/api","text": "詳情","iconPath": "/images/component_normal.png","selectedIconPath": "/images/component_selected.png"}],// tab背景色"backgroundColor" : "#ffffff",// tab邊框顏色 white/black"borderStyle": "white",// tab上文字默認的顏色"color": "#000",// tab上文字選中顏色 "selectedColor": "#6495ED"},// 需要在后臺使用的能力，如音樂播放"requiredBackgroundModes": ["audio"],// 網絡超時"networkTimeout": {// request超時時間"request": 30000,// connectSocket超時時間"connectSocket": 10000,// uploadFile超時時間"uploadFile": 10000,// downloadFile超時時間"downloadFile": 10000},// 小程序權限相關設置"permission": {// 位置相關權限"scope.userLocation": {// 高速公路行駛持續后臺定位"desc": "你的位置信息將用于小程序位置接口的效果展示" }},// 自定義路由相關設置"routes": [{// 投放入口，scheme中的path"path": "home", // 真實的物理存儲路徑"page": "pages/home/home" }],// 小程序cookie機制配置"cookie": {"enableStore": true} }

2、app.js

App({/************** 生命周期函數 **************/// 監聽Web態小程序登錄成功：初次登陸成功觸發（只會觸發一次）onLogin: function (options) {// 僅在Web態小程序有效，App端是無效的// 使用 options.code 換取 session_key},// 監聽小程序的初始化：小程序初始化完成觸發（只會觸發一次）onLaunch: function (options) {/* options的屬性** scene: 場景值** path: 打開小程序的路徑,** query: 當前頁面路徑中的參數** shareTicket: 標記轉發對象** referrerInfo: 從另一個小程序打開該小程序** referrerInfo.appId: 來源小程序的AppKey** referrerInfo.extraData: 來源小程序傳過來的數據*/console.log('SWAN launch');},// 監聽小程序的顯示：小程序初始化完成、從后臺進入前臺都會觸發onShow: function () {console.log('SWAN展現');},// 監聽小程序的隱藏：從前臺進入后臺觸發onHide: function () {console.log('SWAN當前處于后臺');},// 錯誤監聽函數：發生腳本錯誤、API調用失敗時觸發onError: function () {console.log('SWAN發生錯誤');},// 頁面不存在的監聽函數：打開的頁面不存在時觸發onPageNotFound: function () {};// 全局變量globalData: 'SWAN' });// XXX.js const appinfo = getApp(); console.log(appinfo.globalData); // 上述寫法不生效，可試試下述方法 Page({data: {appData: getApp().globalData},onShow() {console.log(this.data.appData);} })

二、小程序頁面Page()

1、四個文件

.css：樣式文件

.js：控制交互邏輯的動態語言

Page({/************** 初始化數據 **************/data:{text: '百度小程序'，id: 1,title: 'cs',price: '100'},/************** 生命周期函數 **************/// 頁面初始化時觸發（一個頁面只會調用一次）onInit(param) {// param當前頁面路徑的參數// 不能進行任何依賴視圖層的操作// 并非所有基礎庫都支持，兼容問題需考慮// 性能優化，建議將頁面的數據網絡請求放在 Page.onInit 中，并在網絡請求的回調中執行 setData ，可以提升頁面的加載速度。},// 頁面加載時觸發（一個頁面只會調用一次）onLoad(param) {// param當前頁面路徑的參數},// 頁面顯示 / 切入前臺時觸發onShow() {},// 頁面初次渲染完成時觸發（一個頁面只會調用一次）onReady() {},// 頁面隱藏 / 切入后臺時觸發onHide() {},// 頁面卸載時觸發onUnload() {},/************** 頁面事件處理函數 **************/// 監聽該頁面用戶下拉刷新事件onPullDownRefresh() {// 需要在app.json的window選項中開啟 enablePullDownRefresh// 如果需要單個頁面支持下拉刷新，可以直接在頁面目錄下的 json 配置文件中開啟enablePullDownRefresh// 當處理完數據刷新后，swan.stopPullDownRefresh可以停止當前頁面的下拉刷新。},// 監聽該頁面用戶上拉觸底事件onReachBottom(e) {// 可以在 app.json 的 window 選項中或頁面配置中設置觸發距離 onReachBottomDistance // 在觸發距離內滑動期間，該事件只會被觸發一次。console.log('onReachBottom');// 常見的業務場景是開發者在這里請求分頁數據},// 監聽用戶滑動頁面事件onPageScroll(e) {// e.scrollTop：頁面在垂直方向已滾動的距離（單位：px）// 慎重調用此方法，避免在onPageScroll中過于頻繁的執行setData等引起邏輯層-渲染層通信的操作},// 設置該頁面的分享信息// 用戶點擊頁面內的"分享"按鈕(button 組件open-type="share")或者頁面右上角菜單的"分享"按鈕會調用// 此事件需要 return 一個Object，用于自定義分享內容。onShareAppMessage(e) {// e.from:分享事件來源。button：頁面內轉發按鈕；menu：右上角分享菜單// e.target: 如果from值是button，則target是觸發這次轉發事件的button,否則為undefinedreturn {// 分享標題title: this.data.title,// 分享內容（推薦設置為小程序簡介或描述）content: '世界很復雜，百度更懂你——小程序簡介或詳細描述', // 分享圖標imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',// 頁面 path，必須是以/開頭的完整路徑。路徑中的參數須通過encodeURIComponent進行編碼。path: '/index/index',// 分享成功回調函數success(res) {},// 分享失敗回調函數fail(err) {},// 分享結束（無論成功或失敗）回調函數complete(res) {},};},// 點擊 tab 時觸發onTabItemTap(item) {// item.index: 被點擊tabItem的序號，從 0 開始// item.pagePath: 被點擊tabItem的頁面路徑// item.text: 被點擊tabItem的按鈕文字},// 監聽頁面 URL query 改變// 引起頁面 URL query 更新的原因有：調用 swan.setURLQuery onURLQueryChange({newURLQuery, oldURLQuery}) {console.log(newURLQuery, oldURLQuery); },// 監聽頁面方向變化事件onResize(res) {/* res的屬性** orientation：當前頁面方向 （豎屏: portrait、橫屏: landscape）** statusBarHeight：狀態欄高度** screenWidth：屏幕寬度** screenHeight：屏幕高度** windowWidth：窗口寬度** windowHeight：窗口高度** */},/************** 組件事件處理函數 **************/// <view onTap="onTap"></view>onTap() {},// this.setData(data, callback)// this,setData({ id: 1 }, ()=> {});// getCurrentPages()// 全局函數用于獲取當前頁面棧的實例// 以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面 })

.swan：頁面的展現模板

<!-- 基礎數據綁定 --> <view>{{test}}</view> <!-- 循環 --> <view s-for="p in persons">{{p.name}}</view> <!-- 條件 --> <view s-if="is4G">4G</view> <view s-elif="isWifi">Wifi</view> <view s-else>Other</view> <!-- 事件 bind:事件名稱 --> <view class="view-more" bind:tap="loadMore">點擊加載更多</view> <!-- touchstart/touchmove/touchend/touchcancel/tap --> <!-- dataset --> <view data-swan="test" bind:tap="onTap"></view> <!--touches Touch對象(文檔、屏幕)：pageX/pageY/clientX/clientY -->

.json：對本頁面的窗口表現進行配置

{// 導航欄背景色"navigationBarBackgroundColor": "#ffffff",// 導航欄標題顏色 black/white"navigationBarTextStyle": "black",// 導航欄標題文件內容"navigationBarTitleText": "智能小程序接口功能演示",// 導航欄樣式 custom/default"navigationStyle": "default",// 窗口背景色"backgroundColor": "#eeeeee",// 是否下拉刷新"enablePullDownRefresh": false,// 下拉loading樣式 dark/light"backgroundTextStyle": "light",// 頁面上拉觸底事件觸發時距離頁面底部距離"onReachBottomDistance": 50,// 不允許頁面上下滾動"disableScroll": false,// 頁面方向"pageOrientation": "auto" }

2、頁面棧和路由

路由方式頁面棧表現觸發時期路由前頁面路由后頁面

初始化	新頁面入棧	智能小程序打開的第一個頁面		onLoad, onShow
打開新頁面	新頁面入棧	調用 API swan.navigateTo 或使用組件 < navigator open-type=“navigateTo”/ >	onHide	onLoad, onShow
頁面重定向	當前頁面出棧，新頁面入棧	調用 API swan.redirectTo 或使用組件 < navigator open-type=“redirectTo”/ >	onUnload	onLoad, onShow
頁面返回	頁面出棧	調用 API swan.navigateBack 或使用組件 < navigator open-type=“navigateBack”/ > 或用戶按左上角返回按鈕	onUnload	onShow
Tab 切換	頁面全部出棧，只留下初始的 Tab 頁面	調用 API swan.switchTab 或使用組件 < navigator open-type=“switchTab”/ > 或用戶切換 Tab	具體分析	具體分析
重加載	頁面全部出棧，只留下新的頁面	調用 API swan.reLaunch 或使用組件 < navigator open-type=“reLaunch”/ >	onUnload	onLoad, onShow

說明：

• navigateTo、redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar 。
• reLaunch、redirectTo、navigateTo 可在需要跳轉的應用內頁面路徑后帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔；如path?key=value&key2=value2，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數。
• 調用頁面路由帶的參數可以在目標頁面的 onLoad、onShow 中獲取

三、自定義組件Component()

1、創建自定義組件

一個自定義組件由 4 個文件 (.swan .css .js .json) 組成

.json文件

{"component": true }

.swan文件

<view class="name" bindtap="tap">{{name}}{{age}} </view>

.css文件

.name {color: red; }

.js文件

Component({properties: {// 定義了name屬性，可以在使用組件時，由外部傳入。此變量可以直接在組件模板中使用name: {type: String,value: 'swan',}},data: {// 這里是一些組件內部數據age: 1},methods: {// 這里是一個自定義方法tap: function(){}} })

頁面在其json文件中引用，在swan中直接引用

// 頁面json配置 home.json {"usingComponents": {"custom": "/components/custom/custom"} } <!-- 頁面模板 (home.swan) --> <view><!-- 在頁面中對自定義組件進行引用 --><custom name="swanapp"></custom> </view>

2、組件模板（插槽slot）和組件樣式

<!-- 1、組件模板 --> <!-- 組件內部模板 --> <view class="wrapper"><slot></slot><view>組件內部節點</view><slot name="slot1"></slot><slot name="slot2"></slot> </view> <!-- 使用組件的頁面或者組件 --> <view><custom-component><view>這里是插入到組件slot中的內容</view><view slot="slot1">我會被插入到組件上方</view><view slot="slot2">我會被插入到組件下方</view></custom-component> </view><!-- 2、模板數據綁定（可以使用數據綁定，這樣就可以向子組件的屬性傳遞動態數據） --> <!-- 組件內部模板 --> <view class="component-range"><slot name="inner" var-name="name"></slot> </view> <!-- 使用組件的頁面或者組件 --> <view><custom-component><view>{{name}}</view></custom-component> </view><!-- 3、組件樣式 --> <!-- 組件內部模板 --> <view class="external-class">這段文本的顏色由組件外的 class 決定</view> <!-- 使用組件的頁面或者組件 --> <custom-component external-class="red-text" /><!-- 3、全局樣式類 --> <!-- 組件內部模板 --> <text class="global-class">這段文本的顏色由組件外的 class 決定</text> // 組件內部模板 Component({// 組件樣式externalClasses: ['external-class'],// 全局樣式類options: {addGlobalClass: true,},data: {name: 'swan-inner'} }); /* 使用組件的頁面或者組件 */ .red-text {color: red; } .global-class {color: red; }

3、Component構造器

// 自定義組件js Component({// 組件的對外屬性，是屬性名到屬性設置的映射表，屬性設置中可包含三個字段， // type 表示屬性類型、// value 表示屬性初始值、// observer 表示屬性值被更改時的響應函數properties: {// 屬性名propName: { // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, nulltype: String, // 屬性初始值（必填）value: 'val', observer: function(newVal, oldVal) {// 屬性被改變時執行的函數（可選）}}},// 監聽指定字段的數據發生改變時觸發observers: {'some.subfield': function(subfield) {// 使用 setData 設置 this.data.some.subfield 時觸發// （除此以外，使用 setData 設置 this.data.some 也會觸發）subfield === this.data.some.subfield},'some.field.**': function(field) {// 使用 setData 設置 this.data.some.field 本身或其下任何子數據字段時觸發// （除此以外，使用 setData 設置 this.data.some 也會觸發）field === this.data.some.field},'**': function(value) {// 數據發生變化即觸發，這里的 value 是 properties 和 data 的合集},}，// 私有數據，可用于模板渲染data: {}, // 類似于 mixins 和 traits 的組件間代碼復用機制behaviors: [],// 組件接受的外部樣式類externalClasses: [],// 一些選項options：{},// 組件生命周期聲明對象，// 組件的生命周期：created、attached、ready、detached 將收歸到 lifetimes 字段內進行聲明，// 原有聲明方式仍舊有效，如同時存在兩種聲明方式，則 lifetimes 字段內聲明方式優先級最高lifetimes: {},// 組件所在頁面的生命周期聲明對象，目前僅支持頁面的 show 和 hide 兩個生命周期pageLifetimes: {},// 定義段過濾器，用于自定義組件擴展definitionFilter: {},// 生命周期函數：在頁面初始化時執行onInit: function () {},// 生命周期函數：在組件實例剛剛被創建時執行，注意此時不能調用 setDatacreated: function () {},// 生命周期函數: 在組件實例進入頁面節點樹時執行，可以為函數，或一個在methods段中定義的方法名attached: function () {},// 生命周期函數: 在組件布局完成后執行，此時可以獲取節點信息ready: function () {},// 生命周期函數: 在組件實例被從頁面節點樹移除時執行detached: function () {},// 組件的方法，包括事件響應函數和任意的自定義方法methods: {onTap: function () {this.setData({// 更新屬性和數據的方法與更新頁面數據的方法類似});}}, });

組件的通用屬性和方法

屬性

• is：組件的文件路徑
• id：節點id
• dataset： 節點dataset
• data: 組件數據，包括內部數據和屬性值
• properties：組件數據，包括內部數據和屬性值（與 data 一致）

方法

• setData(data, callback)：設置 data 并執行視圖層渲染
• hasBehavior()：檢查組件是否具有 behavior（檢查時會遞歸檢查被直接或間接引入的所有 behavior）
• triggerEvent()：觸發事件
• createSelectorQuery()：創建一個 SelectorQuery 對象，選擇器選取范圍為這個組件實例內，與 swan.createSelectorQuery().in(this) 是等效
• createIntersectionObserver()：創建一個 IntersectionObserver 對象，選擇器選取范圍為這個組件實例內
• selectComponent()：使用選擇器選擇組件實例節點，返回匹配到的第一個組件實例對象（會被 swan://component-export 影響），在生命周期 onReady 開始時生效
• selectAllComponents()：使用選擇器選擇組件實例節點，返回匹配到的全部組件實例對象組成的數組
• groupSetData()：立刻執行 callback ，其中的多個 setData 之間不會觸發界面進行重復繪制

4、組件間的通信與事件

// 1、通過 dispatch 方法與父組件通信 /* 父組件邏輯 */ Component({messages: {'childmessage': function (e) {console.log('childmessage', e);}} }); /* 子組件邏輯 */ Component({created() {this.dispatch('childmessage', {name: 'swan'});} });// 2、通過 triggerEvent 方法與父組件通信 /* 組件child邏輯 */ /* <button bindtap="onTap">點擊這個按鈕將觸發 myevent 事件</button> */ Component({properties: {},methods: {onTap: function() {// detail對象，提供給事件監聽函數var myEventDetail = {} // 觸發事件的選項 bubbles：是否冒泡 capturePhase：事件是否擁有捕獲階段var myEventOption = {bubbles:true} this.triggerEvent('myevent', myEventDetail, myEventOption);}} }); /* 使用該組件的頁面 */ /* <child bindmyevent="listener"></child> */ Page({listener: function (e) {console.log(e);} })// 3、通過 this.selectComponent 方法獲取子組件實例對象 <!-- 組件child頁面 --> <!-- <view>這是組件child</view> --> <!-- 使用child的頁面 --> <!-- <child id="page-id">這是使用child</child> --> // 使用該組件的邏輯 Page({onLoad: function () {const res = this.selectComponent('#page-id');console.log(res);} });

5、抽象節點

自定義組件模板中的一些節點，其對應的自定義組件不是由自定義組件本身確定的，而是由自定義組件的調用者確定的。這時可以把這個節點聲明為“抽象節點”。

例如，我們現在來實現一個“選框組”（selectable-group）組件，它其中可以放置單選框（custom-radio）或者復選框（custom-checkbox）

<!-- selectable-group.swan --> <view s-for="{{labels}}"><label bindtap="itemTap" data-index="{{index}}"><selectable disabled="{{false}}" selected="{{selected[index]}}" name="{{name}}"></selectable>{{item}}</label> </view><!--調用的組件或頁面--> <selectable-group generic:selectable="custom-radio" /> <selectable-group generic:selectable="custom-checkbox" /> <!-- selectable-group.json --> {"componentGenerics": {"selectable": true,// 可放個默認組件"selectable": {"default": "path/to/default/component"}} }<!--調用的組件或頁面d的json文件--> {"usingComponents": {"custom-radio": "path/to/custom/radio","custom-checkbox": "path/to/custom/checkbox"} }

四、模板語法

1、模板語法

<!-- 基礎數據綁定 --> <!-- 雙向綁定的數據需包裹在{= =} --> <view>{{test}}</view><!-- 循環 --> <view s-for="persons">{{index}}: {{item.name}}</view> <view s-for="p,index in persons">{{index}}: {{p.name}}</view> <view s-for="persons" s-for-index="idx" s-for-item="p">{{idx}}: {{p.name}}</view> <!-- 如果列表中的項目會動態地增加、刪除，并且希望列表中的項目保持自己的特征和狀態（例如 input 中的輸入內容），需要在 s-for 指令聲明中指定 trackBy。 --> <!-- trackBy 后跟的值可以是 s-for 的 array 中 item 本身或者其屬性（如 item.id），該值需要是列表中唯一的字符串或數字，且不能動態改變。 --> <!-- 當數據更新觸發重新渲染時，將自動跟蹤項的變更，原先列表內的項位置會移動，新添加的項會被渲染，以確保組件保持自身的狀態，并且省去一部分重新渲染帶來的消耗。 --> <input s-for="list trackBy item" placeholder="請輸入內容" /> <button bindtap="delete">刪除首項</button><!-- 條件 --> <view s-if="is4G">4G</view> <view s-elif="isWifi">Wifi</view> <view s-else>Other</view><!-- 模板 --> <!-- template-demo.swan--> <template name="person-card"><view><text>位置: {{pos}}</text><text>姓名: {{name}}</text></view> </template> <!-- template-demo.swan--> <template is="person-card" data="{{{...person}}}" /> <!-- template-demo.js --> <!-- Page({ data: { person: { name: 'Lebron James', pos: 'SF', age: 33 } } }); --><!-- 事件處理 --> <!-- 事件 bind:事件名稱 --> <view class="view-more" data-swan="test" bind:tap="loadMore">點擊加載更多</view> <!-- e.currentTarget.dataset.swan -->/* 事件的分類** tap: 觸摸后馬上離開** longtap: 觸摸后超過 350ms 再離開（推薦使用 longpress 事件代替）** longpress: 觸摸后超過 350ms 再離開，如果是指定了事件回調函數并觸發了這個事件，tap 事件將不被觸發** touchstart: 觸摸開始時** touchmove: 觸摸后移動時** touchend: 觸摸結束時** touchcancel: 觸摸后被打斷時，如來電等** touchforcechange: 支持 3D Touch 的 iPhone 設備，重按時會觸發** transitionend: 會在 transition 或 swan.createAnimation 動畫結束后觸發** animationstart: 會在 animation 動畫開始時觸發** animationiteration: 會在 animation 一次迭代結束時觸發** animationend: 會在 animation 動畫完成時觸發 *//* 事件綁定和冒泡 ** key以bind或catch開頭，銜接事件類型，例如bindtapcatchtouchcancel。也可以在bind和catch后可以緊跟一個冒號，如bind:tap、catch:touchstart，其功能不變** bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡 *//* 事件的捕獲 ** 捕獲階段是位于冒泡階段之前，在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反** 在捕獲階段監聽的方式是采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段** Tip：在安卓及開發者工具、Web 態特定瀏覽環境（早期瀏覽器），嵌套最內層元素 capture 與 bind 事件觸發時機取決于模板中事件聲明前后順序，如果需要同時使用 capture 與 bind，需要保證其先后順序避免導致觸發順序在不同平臺不一致的問題。 *//* 事件對象** type: 事件的類型** timeStamp: 頁面打開到觸發事件所經過的毫秒數** target: 觸發事件的組件的屬性值集合** currentTarget: 當前組件的一些屬性值集合** detail: 自定義事件對象屬性列表** touches: 觸摸事件類型存在，存放當前停留在屏幕中的觸摸掉新增的數組** changedTouches: 觸摸事件類型存在，存放當前變化的觸摸點信息的數組*** 擴展1：target/currentTarget**** dataset: 事件綁定的組件上由 data-開頭的自定義屬性組成的集合**** id: 事件綁定組件的id**** offsetTop: 元素向上偏移的像素值**** offsetLeft: 元素向下偏移的像素值*** 擴展2：detail**** 是自定義事件所攜帶的數據，具體詳見組件定義中各個事件的定義。*** 擴展3：dataset**** 在組件的事件被觸發時，也可以傳遞自定義的數據*** 擴展4：touch**** identifier: 觸摸點的標識符**** clientX, clientY: 距離頁面可顯示區域（屏幕除去導航條）左上角的 X 軸與 Y 軸的距離**** pageX, pageY: 距離文檔左上角的 X 軸與 Y 軸的距離*** 擴展5：changedTouch**** 數據格式同 touches，指的是有變化的觸摸點，如 touchstart（開始），touchmove（變化），touchend，touchcancel（結束）等 */<!-- 文件的作用域 --> /*** 在JavaScript文件中聲明的變量和函數只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數，且不會互相影響。** 通過全局函數getApp()可以獲取全局的應用實例，如果需要全局的數據可以在App()中設置 */<!-- 引用 --> /* 1、import */ <!-- templateA.swan--> <template name="A"><text> A template </text> </template> <!-- templateB.swan--> <import src="../templateA/templateA.swan"/> <template name="B"><text> B template </text> </template> <template is="A"/> <!-- templateC.swan--> <import src="../templateB/templateB.swan"/> <template is="A"/> <template is="B"/> /* 2、include */ <!-- index.swan --> <include src="header.swan"/> <view> body </view> <include src="footer.swan"/> <!-- header.swan --> <view> header </view> <!-- footer.swan --> <view> footer </view>

2、SJS語法參考

1）基礎

• 編寫 SJS 邏輯

// pages/utils.sjs中編寫SJS邏輯 const bar = function(name) {return 'swan-' + name; } const foo = 'hello swan';export default {bar: bar,foo: foo }; // 或者使用CMD的形式導出 // module.exports = { // bar: bar, // foo: foo // };

• 引用并調用 SJS

<!-- 在 pages/index/index 頁面中 --> <!-- 引用SJS --> <import-sjs src="../utils.sjs" module="utils" /> <!-- 使用SJS --> <view class="container">{{utils.bar(name)}}</view> <view>{{utils.foo}}</view>

• 頁面顯示結果

swan-sjs hello swan

import-sjs 標簽

相關屬性：

module： 當前<import-sjs>標簽的模塊名。必填字段

src: 引用.sjs文件的路徑，僅當本標簽為單閉合標簽或標簽的內容為空時有效； 如果當做 sjs 代碼容器標簽，則不必填寫。

注意：import-sjs標簽除了引用其它sjs模塊，還可直接作為SJS代碼的容器，使用module制定該模塊名稱，用法與上等同。

<!-- 定義SJS --> <import-sjs module="utils"> const bar = function(name) {return 'swan-' + name; } const foo = 'hello swan';export default {bar: bar,foo: foo }; </import-sjs><!-- 使用SJS --> <view class="container">{{utils.bar(name)}}</view> <view>{{utils.foo}}</view>

2）變量

• SJS 中的變量均為值的引用；
• 沒有聲明的變量直接賦值使用，會被定義為全局變量；
• 如果只聲明變量而不賦值，則默認值為undefined；
• var 表現與 javascript 一致，會有變量提升；
• 支持 const 與 let，與 JavaScript 表現一致。

// 在SJS模塊中 var count = 110; var bar = 'hello swan'; // undef === undefined var undef; const NAME = 'SJS'; let str = 'string';

變量命名必須符合下面兩個規則：

• 首字符必須是：字母（a-zA-Z），下劃線（_）
• 剩余字符可以是：字母（a-zA-Z），下劃線（_）， 數字（0-9）

3）注釋

// pages/utils/sjs// const NAME = 'sjs';/*** let str = 'swan';*/

4）運算符

與 javascript 一致

5）語句

與 javascript 一致

if語句、switch語句、for語句、while語句

6）數據類型

SJS語言目前共有以下幾種數據類型：

• number ： 數值
• boolean：布爾值
• string ：字符串
• object：對象
• function：函數
• array : 數組
• date：日期
• regexp：正則

7）基礎類庫

• console
• Math
• JSON
• Number
• Date
• Global

方法

• parseInt
• parseFloat
• isNaN
• isFinite
• decodeURI
• decodeURIComponent
• encodeURI
• encodeURIComponent

8）esnext

• let & const
• 箭頭函數
• 更簡潔的字面量
• 模板字符串
• 解構賦值
• Default + Rest + Spread

3、Filter過濾器

推薦使用功能更全的 SJS 功能。Filter 功能將不再更新，請勿在s-if、s-for、template、自定義組件等標簽中使用。
Filter 是小程序的過濾器，結合 SWAN 模板，可以構建出頁面的結構。

說明

• Filter 文件命名方式為：模塊名 .filter.js ；
• Filter 通過 export default 方式對外暴露其內部的私有函數；
• Filter 只能導出 function 函數；
• Filter 函數不能作為組件的事件回調；
• Filter 可以創建獨立得模塊，也可以通過內聯的形式；
• Filter 不支持全局變量；
• 多個 filter 標簽不能出現相同的 src 屬性值， module 屬性的值也是標識模塊的唯一 id 。

<!-- filter 內聯渲染 --> <!-- swan --> <view> {{swan.message()}} </view> <filter module="swan">export default {message: function() {return 'Hello world';}} </filter><!-- 數據處理--> <!-- swan模板 --> <view>{{swan.maxin(array)}}</view> <filter src="./index.filter.js" module="swan"></filter> // index.js Page({data: {array: [1, 3, 6, 8, 2, 0]} }); // index.filter.js export default {maxin: arr => {var max = undefined;for (var i = 0; i < arr.length; ++i) {max = max === undefined ?arr[i] :(max >= arr[i] ? max : arr[i]);}return max;} };

總結

以上是生活随笔為你收集整理的百度小程序开发的基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。