[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 ```