[TOC] # 1.小程序要點 ## 1.1文件結構 ### 1.基礎文件 （ app.js app.json app.wxss ***.wxml 項目必備) ``` 1. js 2. json 3. wxss: 寫樣式 4. wxml ：寫結構 app不需要 .wxml ``` > 1.1-1.3 文件必須有的 #### 1.1 app.js ``` App({ /** * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次） */ onLaunch: function () { }, /** * 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow */ onShow: function (options) { }, /** * 當小程序從前臺進入后臺，會觸發 onHide */ onHide: function () { }, /** * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息 */ onError: function (msg) { } }) ``` #### 1.2 app.json ``` { "pages":[ "pages/welcome/welcome", "pages/index/index", "pages/user/user" ], "window": { "navigationBarBackgroundColor": "#b3d4db", "navigationBarTextStyle": "#fff", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } } ``` #### 1.3 app.wxss ``` 放置公共樣式 相當于 base.css ``` ### 2. 頁面文件 * 頁面文件裝在 `page` 文件夾里，一個頁面以后、個單獨的文件夾，每個頁面包含四個基礎文件，基礎文件名與文件夾名一致 ``` 如 page/index/index.js,index.json,index.wxss,index.wxml ``` ### 3.引用公共文件 > 公共文件一般放在 template 文件夾中 #### 3.1調用wxml * 公共文件 ``` <template name="banner"> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" > <block wx:for="{{imgUrl}}" wx:key="{{index}}"> <swiper-item> <image src="{{item.src}}" /> </swiper-item> </block> </swiper> </template> ``` * 調用文件 ``` <import src="../template/banner（路徑）"></import> <template is="banner" data = "{{imgUrl}}"></template> ``` ***** ``` 在一個wxml定義模板 <template name="test"> <view>{{text}}</view> </template> 在另一個文件中引入模板 <import src="path"></import> <template is="test" data="{{text}}"></template> ``` #### 3.2 調用 .wxss 文件 * 公共文件 ``` 沒要求，和css外部樣式一樣寫 ``` * 調用文件 ``` @import "../template/banner（路徑）"; ``` #### 3.3 調用 js 文件 * 公共文件（存放數據） ``` var imgUrl = [ {src:"../../images/1.png"}, {src:"../../images/2.jpg"}, {src:"../../images/3.jpg"}, {src:"../../images/4.jpg"} ]; module.exports={ //給外部提供一個 js 接口 imgUrl:imgUrl }; ``` * 調用文件 ``` var local = require("../data/local.js") //獲取js 的接口 Page({ onLoad:function(){ var bannerData = local.imgUrl; this.setData({ imgUrl:bannerData }) } }); ``` ## 2.1 小程序的基本用法 ### 1 navigator跳轉 ``` <navigator url="/pages/index/index" redirect="false" hover-class="navigator-hover" open-type="navigate"> <view>跳轉到index</view> </navigator> ``` ### 2. 事件跳轉 ``` //wxml文件中綁定事件 <view bindtap = "handClick">跳轉</view> //js Page({ handClick(){ wx.navigateTo({ url:"" }) } }) ``` ### 3. wx:for ``` //wxml <block wx:for="{{arr}}" wx:key="index"> <view>{{item}}{{index}}</view> </block> //js Page({ data:{ arr:[1,2,3] } }); ``` ### 4.MVC ``` data,view,controller ```