text: (window.webpackJsonp=window.webpackJsonp||[]).push([[40],{215:function(a,n,e){"use strict";e.r(n);var t=e(0),s=Object(t.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var a=this,n=a.$createElement,e=a._self._c||n;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"小程序"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#小程序","aria-hidden":"true"}},[a._v("#")]),a._v(" 小程序")]),a._v(" "),e("h4",{attrs:{id:"任何情况下，100rpx-1rem"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#任何情况下，100rpx-1rem","aria-hidden":"true"}},[a._v("#")]),a._v(" 任何情况下，100rpx = 1rem")]),a._v(" "),e("h5",{attrs:{id:"_1、小程序的作用"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、小程序的作用","aria-hidden":"true"}},[a._v("#")]),a._v(" 1、小程序的作用")]),a._v(" "),e("ul",[e("li",[a._v("一种新的产品运营方式，依赖于微信客户端，基于js可以进行开发，多种传播途径（入口场景）,很容易实现用户裂变")])]),a._v(" "),e("h5",{attrs:{id:"_2、小程序开发的必备内容"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、小程序开发的必备内容","aria-hidden":"true"}},[a._v("#")]),a._v(" 2、小程序开发的必备内容")]),a._v(" "),e("ul",[e("li",[a._v("开发者工具")]),a._v(" "),e("li",[a._v("注册小程序账号\n"),e("ol",[e("li",[a._v("小程序管理后台")]),a._v(" "),e("li",[a._v("获取Appid （设置--开发设置）")]),a._v(" "),e("li",[a._v("添加多个开发者（设置不同的开发权限）")]),a._v(" "),e("li",[a._v("发布小程序")]),a._v(" "),e("li",[a._v("小程序运维数据")]),a._v(" "),e("li",[a._v("注意：\n6. 一个邮箱只能注册一个小程序\n7. 每一个小程序id都是唯一的\n8. 每一个账号只能发布一个小程序")])])])]),a._v(" "),e("h5",{attrs:{id:"_3、小程序的开发分为两个方向"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3、小程序的开发分为两个方向","aria-hidden":"true"}},[a._v("#")]),a._v(" 3、小程序的开发分为两个方向")]),a._v(" "),e("ol",[e("li",[a._v("小程序应用开发")]),a._v(" "),e("li",[a._v("小游戏开发")])]),a._v(" "),e("h5",{attrs:{id:"_4、为什么叫小程序？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_4、为什么叫小程序？","aria-hidden":"true"}},[a._v("#")]),a._v(" 4、为什么叫小程序？")]),a._v(" "),e("ul",[e("li",[a._v("因为小，所以叫小程序开发")]),a._v(" "),e("li",[a._v("小程序的发布包有大小限制，最初为1MB，后来增加到2MB！因为小程序和网页不一样，网页内容是放在服务端，浏览器只是一个加载作用，而小程序是打开小程序微信会将小程序依赖的代码下载到本地进行运行")]),a._v(" "),e("li",[a._v("开发10MB")])]),a._v(" "),e("h5",{attrs:{id:"_5、代码构成"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_5、代码构成","aria-hidden":"true"}},[a._v("#")]),a._v(" 5、代码构成")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v("1、.json    小程序的配置文件\n2、.wxml    小程序的模板文件 类似与html\n    (1) Wxml类似与html，但是不是html，区别是\n    (2) 在html中我们使用标签做结构，在wxml中我们实用组件\n    (3) 小程序中有指令，表达式的功能，而html没有\n3、.wxss    小程序的样式文件 类似于css\n    Wxss类似于css但是不同\n    (1) 小程序新增尺寸单位rpx\n    (2) 小程序样式有全局和页面的区别\n    (3) wxss仅支持\n4、.js      小程序的逻辑文件 就是js\n\n\nApp的构成\n状态栏  header头    窗口    底部tabbar\n\n入口\napp.json    小程序的全局配置（状态栏，header头，窗口，tabbar，网络超时时间，...）\napp.wxss    全局样式作用于页面\napp.js\n\n页面\n[pageName].json 配置当前页面中窗口表现\n[pageName].js\n[pageName].wxss      wxss充当的就是类似CSS的角色编写页面样式，只针对当前页面起作用，不会冲突\n[pageName].wxml     wxml充当的就是类似HTML的角色编写页面模板\n\n\n")])])]),e("h5",{attrs:{id:"_6、小程序的启动"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_6、小程序的启动","aria-hidden":"true"}},[a._v("#")]),a._v(" 6、小程序的启动")]),a._v(" "),e("ul",[e("li",[a._v("微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。")]),a._v(" "),e("li",[a._v("紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:")])]),a._v(" "),e("h5",{attrs:{id:"_7、小程序的功能"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_7、小程序的功能","aria-hidden":"true"}},[a._v("#")]),a._v(" 7、小程序的功能")]),a._v(" "),e("ol",[e("li",[a._v("启动程序:  小程序的入口哦")]),a._v(" "),e("li",[a._v("页面:  页面的注册")]),a._v(" "),e("li",[a._v("组件： 内置组件 （view， button， text， map， ....） 和   自定义组件")]),a._v(" "),e("li",[a._v("Api：微信提供小程序的微信内置功能(登录，支付，扫码，ajax，... )")])]),a._v(" "),e("h5",{attrs:{id:"_8、小程序全局配置app-json"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_8、小程序全局配置app-json","aria-hidden":"true"}},[a._v("#")]),a._v(" 8、小程序全局配置app.json")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v('{\n  pages: [\n    ‘/page/index/index’,   //小程序每个页面由4个文件组件，但是配置路径的时候不需要添加后缀，因为要根据文件路径找到对应的4个不同后缀的文件\n    ‘/page/log/log’\n    ],  //用来配置小程序所有页面路径， 第一个就是首页\n“window”: {\n    “navigationBarBackgroundColor” : “#f00”,  //导航栏背景颜色  HexColor 默认黑色\n    “navigationBarTextStyle”: “”,   //导航栏标题颜色，仅支持 black / white  默认白色\n    “navigationBarTitleText”: “文字”,  //设置导航栏文字\n    “navigationStyle” ： “custom”， // 导航栏样式\n    “backgroundColor”: “”,  //背景颜色\n    “enablePullDownRefresh”: true， //开启下拉刷新 需要在对应页面设置 onPullDownRefresh监听函数\n    “onReachBottomDistance”: 50， //开启上拉加载， 需要在对应页面设置 onReachBottom监听\n    }, //配置小程序全局的窗口表现\n“tabBar”: { // 其中 list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象\n        "list":[{},{},{}]\n    }\n}\n')])])]),e("h5",{attrs:{id:"_9、小程序实例和小程序页面"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_9、小程序实例和小程序页面","aria-hidden":"true"}},[a._v("#")]),a._v(" 9、小程序实例和小程序页面")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v('**注册小程序实例**\n小程序注册使用 App(Object) App() 必须在app.js中调用，必须调用且只能调用一次\nObject:{\n    onLaunch(){}, // 小程序初始化，全局只触发一次\n    onShow(){}, // 小程序显示\n    onHide(){}, // 小程序从前台到后台的隐藏\n    onError(){}, // 小程序发送错误的捕获\n    onPageNotFound(){} // 页面找不到的回调\n    \n    // 其他任意属性和方法\n    aa(){},\n    bb:{}\n}\n\n在小程序实例中可以通过this调用任意函数和属性，但是需要注意的是不可以随便调用生命周期函数，因为这样会违背生命周期的执行\nonLaunch 和 onShow 生命周期接收到一个Object参数\n参数的值：{\n    path:\'打开小程序的路径\'，\n    query:\'打开小程序的query(参数)\',\n    scene:\'打开小程序的场景值\'，\n    shareTicket:\'获取到转发信息\'，\n    referrerInfo:{  // 第三方来源（其他小程序，其他app, ...）\n        appId:"来源的ID",\n        extraData:"来源消息"\n    }\n}\n\n获取实例使用getApp()，可以调用除了生命周期外的任意函数和属性\n\n\n**注册页面**\n注册页面使用Page(Object)\nObject:{\n    data:{}, // 页面相关数据\n    // 页面相关的生命周期\n    onLoad(){}, // 页面加载完成\n    onShow(){}, // 页面显示\n    onReady(){}, // 页面渲染完成\n    onHide(){}, // 页面隐藏\n    onUnload(){} // 页面卸载\n    \n    // 页面相关的事件\n    （1） onPullDownRefresh(){}, // 监听用户的下拉刷新事件回调 可以通过wx.stopPullDownRefresh停止当前页面的下拉刷新动画，需要在page.json中配置enablePullDownRefresh:true\n    \n    （2） onReachBottom(){}, // 监听用户的上拉加载触底事件，需要在page.json中配置onReachBottomDistance:Number\n    \n    （3） onPageScroll(scroll){}, // 监听页面的滚动事件，前提是页面是允许滚动的，并且只能监听纵向滚动，可以通过scroll.scrollTop获取到滚动y轴区域\n    \n    （4） onshareAppMessage(){\n        return {\n            title:"标题",\n            path:"路径",\n            imageUrl:"图片路径"\n        }\n    }\n    监听页面分享事件，需要返回一个对象设置分享信息，接收到一个分享信息\n    Object：{\n        from:"分享来源 微信menu 或者button按钮",\n        target:"如果是点击button按钮的话 这个属性的值就是button按钮， 其他都是undefined",\n        webViewUrl:"如果分享的页面有web-view组件的话，那么就会存在网页的地址"\n    }\n    \n    （5） onTabItemTap(){}  // 点击tab切换时\n    \n}\n')])])]),e("h5",{attrs:{id:"_10、模板渲染"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_10、模板渲染","aria-hidden":"true"}},[a._v("#")]),a._v(" 10、模板渲染")]),a._v(" "),e("ol",[e("li",[a._v("简单绑定")])]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v("数据绑定使用Mustache语法(双大括号)将变量包起来, 所有需要渲染的数据来源与page中的data\n\n\n类似于vue的数据绑定，但是有区别\n在vue中我们使用v-bind的形式绑定动态属性  v-bind:name=”name”\n在小程序中所有的动态值的输出全部使用{{}}   name=”{{name}}”\nwx:for=”{{list}}”  wx:if=”{{true}}”\n任何动态内容都需要写在 {{}} 内（内容，动态属性，控制属性，关键字，运算，...， 数组， 对象）, 但是不能执行函数， \n\n")])])]),e("p",[a._v("2、指令")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v("指令：\nwx:for  用于数据循环数组，对象\n数组  item指的是当期数据项, index指的是索引\n对象  item指的是value值，index指的是key值\n\n循环的时候记得实用wx:key直到当前项的唯一key值，否在会发出警告\n使用wx:for-item=”value”  wx:for-index=”key” 可以改变item，index 的别名\n\nwx:if  wx:elif  wx:else  用于条件判断 值是一个返回布尔值的表达式\n")])])]),e("p",[a._v("3、template模板")]),a._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[a._v("WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用\n\n定义\n使用template组件定义,使用name指定模板名称\n<template name=”name”>\n片段代码  {{age}}\n</template>\n\n使用template的is属性查找对应定义的模板，可以进行展示，data属性可以给模板内部传递数据\n<template is=”name” data=”{{age: 100, name: ‘aaaa’}}” />\n")])])])])}],!1,null,null,null);n.default=s.exports}}]);