微信小程序

1.小程序的目录结构

• 目录和文件组成
• 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page组成

目录

• pages

  :小程序的页面放在该目录，一般一个目录就是一个页面

  • **.js :放置的该页面的逻辑
  • **.json:放置该文件的配置
  • **.wxss 对标css，该文件中放置的是页面的样式
  • **.wxml 对标html，该文件中放置的是该页面结构

• utils:放置的是项目模块化的公共代码（模块文件，可以做一些功能模块封装）

• common:公共的样式，

• components：公共的组件

• static:公共的资源,图片，视屏，音频文件

文件

• app.js ：放置的整个小程序的逻辑。（项目的入口js文件）
• app.json : 放置的是整个小程序的配置（项目的配置文件）
• app.wxss：放置的是小程序整体的样式结构（全局的css样式文件）
• project.config.json：项目配置文件，不要手动修改里面的配置，记录用户配置的喜好，即使换了小程序的运行环境，不用重新配置了。
• sitemap.json：配置微信能不能搜索到该小程序（栈点索引）

小程序目录描述

• 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
• 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

• 一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

允许上传的文件类型

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

• wxs
• png
• jpg
• jpeg
• gif
• svg
• json
• cer
• mp3
• aac
• m4a
• mp4
• wav
• ogg
• silk

2.小程序的配置

5.1全局配置

• 小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径（配置路由及）、窗口表现、设置网络超时时间、设置多 tab 等。
  • 1 是一个json格式的数据
  • 2 语法格式很严格
  • 3 不允许写注释

5.1.1pages

• 页面路径列表
  • 页面路径不能以/ ./ …/ 开头
  • 数组中的每一项都要用逗号隔开，最后不加逗号
  • 不能使用单引号
• 配置小程序的路由，必填，里面放置的小程序的页面

 "pages": [

    "pages/index/index",

    "pages/cart/cart",

    "pages/my/my",

    "pages/cate/cate"

  ],

5.1.2entryPagePath

• 设置小程序的默认启动的页面。
• 如果有entryPagePath属性，默认启动的首页就是该选项配置的
• 如果没有entryPagePath属性，默认启动的页面使用pages属性中的第一个页面
• 一般开发者习惯将index页面作为首页

"entryPagePath": "pages/index/index",

5.1.3window

• 用于设置小程序的状态栏、导航条、标题、窗口背景色。

{
  "pages": [
    "pages/index/index",
    "pages/a/a",
    "pages/logs/logs",
    "pages/b/b"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "我的",
    "navigationBarTextStyle": "black",
     //  下拉刷新界面的背景颜色，需要开启enablePullDownRefresh，才能看见效果
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light",
     //  设置导航栏  如果设置custom 设置自定义导航栏   之前做的导航栏样式都不会再有效果
    "navigationStyle": "custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

5.1.4tabbar配置

"tabBar": {
    "color":"#ccc",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "position": "top",
    "custom": false,
    "list": [
        {
          "pagePath": "pages/index/index",
          "text":"首页",
          "iconPath": "./images/index.png",
          "selectedIconPath": "./images/indexFull.png"
        },
        {
          "pagePath": "pages/car/car",
          "text":"购物车",
          "iconPath": "./images/cart.png",
          "selectedIconPath": "./images/cartFull.png"
        }
        ,
        {
          "pagePath": "pages/mine/mine",
          "text":"个人中心",
          "iconPath": "./images/my.png",
          "selectedIconPath": "./images/myFull.png"
        }
    ]
  },

注意

• 至少设置2个，最多5个tab
• position设置为top的时候 iconpath和selectedIconpath没有效果
• iconpath和selectedIconpath图片40kb 不能使用网络图片
• pagePath的页面文件路径不能以/ …/ ./ 开头

5.2页面配置

• 页面配置文件高于全局配置文件，只能配置window项
• 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面配置的作用范围只作用于该页面。

  "navigationBarBackgroundColor": "#ff0000",

  "navigationBarTextStyle": "white",

  "navigationBarTitleText": "小u商城",

   "backgroundColor": "#00ff00",

   "backgroundTextStyle": "dark",

   "enablePullDownRefresh": true

5.3sitemap配置(了解)

• 栈点索引
• 微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中

5.3.1在小程序管理的后台配置是否允许被搜索到

打开小程序的管理后台----页面内容收录

5.3.2配置sitemap.json

• 虽然在小程序的管理后台配置了希望被微信搜索到，要配置搜索规则。
• 默认规则:如果sitemap中的规则没有一个命中的画则使用默认规则，所有的页面都将被搜索得到
• 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性：

配置项

属性	类型	必填	描述
rules	Object[]	是	索引规则列表

• 一个对象就是一个访问规则

{

 "rules": [{

  "action": "disallow",

  "page":"/pages/cart/cart"

 },{

  "action": "disallow",

  "page":"/pages/my/my"

 },{

  "action": "allow",

  "page":"/pages/detail/detail",

  "params": ["price","info"],

  "matching": "partial"

 }]

}

rules

• rules 配置项指定了索引规则，每项规则为一个JSON对象，属性如下所示：

• matching 取值说明

• 对于没有参数的页面使用action和page就能完成配置，对于有参数的页面，需要params和matching配合使用，根据页面的需求.
• 一般项目完成后在进行配置。

3.小程序场景值

6.1概念

• 场景值用来描述用户进入小程序的路径。完整场景值的含义请查看，用户怎么进入小程序。

6.2应用

• 不同场景值做不同的业务。
• kfc:通过扫码进入的小程序，跳转到点餐页面，通过公众号菜单，进入到发放优惠券的界面。

onLaunch: function (option) {

  if(option.scene==1035){

   console.log("发放优惠券")

  }

  if(option.scene==1011){

   console.log("点餐")

  }  

 },

6.3获取场景值的方式

• 对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值。

App({
  // 小程序初始化完成走的生命周期
  onLaunch(a){
      // console.log("onlaunch",a)
      // 同步 
      let b = wx.getLaunchOptionsSync();
      console.log(b)
      if(b.scene==1011){
        console.log("活动详情")
      }
  },
  onShow(e){
    console.log("onshow",e)
    }
   
})

• 对于小游戏，可以在 wx.getLaunchOptionsSync 和 wx.onShow 中获取上述场景值

• 小程序的配置

  • 全局配置—app.json–所有页面----路由–全局窗口–tabBar–分包–注册全局组件
  • 局部配置–页面对应的json文件–当前页面生效—页面窗口–局部注册组件
  • 局部配置–覆盖全局

1小程序的逻辑层

• 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

1.1逻辑层的概念

• 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
• 开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。
• 在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：
  • 增加 App 和 Page 方法，进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
  • 提供模块化能力，每个页面有独立的作用域。
  • 注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

1.2注册小程序

• 每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
• 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
• App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

1.2.1小程序的生命周期监听方法

App({
	 /**	
	  \* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）	
	  */	
	 onLaunch: function () {
	  console.log("app launch")	
	 },	
	 /**	
	  \* 当小程序启动，或从后台进入前台显示，会触发 onShow	
	  */	
	 onShow: function (options) {	
	  console.log("app show")	
	 },	
	 /**	
	  \* 当小程序从前台进入后台，会触发 onHide	
	  */	
	 onHide: function () {	
	  console.log("app hide")	
	 },	
	 /**	
	  \* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息（当小程序有报错信息，无论是页面文件还是全局文件，只要有报错信息，就会触发onerror函数）	
	  */	
	 onError: function (msg) {	
	  //调用记录日志接口	
	 },	
	 onPageNotFound:function(){	
	  wx.navigateTo({	
	   url: './pages/notfound/notfound',	
	  })	
	 }
})

1.2.2其他

• 用户可以在App中自定义一些属性和方法，然后通过this.属性/方法去调用，

App({
	 globalData:{	
	  token:"",	
	  userinfo:""	
	 },	
	 /**	
	  \* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）	
	  */	
	 onLaunch: function () {	
	  this._login()	
	 },	
	 _login:function(){	
	  //判断用户有没有登录过	
	  //如果登录过	
	  //调用登录的接口,返回对应的token	
	  //将token存储到缓存中，再将token放到globalData中，这里globalData就是全局变量	
	  console.log("login ok")	
	  this.globalData.token="abcdefgh124343242"
	  this.globalData.userInfo={
	  	name:"zhangsan"
	  }	
	  console.log(this.globalData)	
	 },	
	 /**	
	  \* 当小程序启动，或从后台进入前台显示，会触发 onShow	
	  */	
	 onShow: function (options) {	
	  console.log("app show")	
	 },
	 /**	
	  \* 当小程序从前台进入后台，会触发 onHide	
	  */	
	 onHide: function () {	
	  console.log("app hide")	
	 },	
	 /**	
	  \* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息	
	  */	
	 onError: function (msg) {	
	  //调用记录日志接口	
	 },	
	 onPageNotFound:function(){	
	  wx.navigateTo({	
	   url: './pages/notfound/notfound',	
	  })	
	 }
})

• 在App.js获取全局变量和函数

//app.js
App({
 
  // 小程序启动或者切前台
  onShow(){
    console.log("onshow")
   
  },
  // 小程序初始化完成 全局只触发一次
  onLaunch(){
    console.log("onlaunch")
    console.log(this.userInfo.name)
    console.log(this.userInfo.age)
    console.log(this.say())
  },
  // 小程序切后台的时候触发
  onHide(){
    console.log("onhide")
  },
  // 当小程序有报错信息，无论是页面文件还是全局文件，只要有报错信息，就会触发onerror函数
  onError(err){
    console.log("错误信息",err)
  },
  onPageNotFound(){
    console.log("页面不存在")
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },
  // 全局的变量
  userInfo:{
    name:"张三",
    age:20
  },
  // say(){
  //     return  "正在吃东西" 
  // }
  // 全局的函数
  say:function(){
    // console.log(this.userInfo,"函数")
    // 在函数内部访问全局变量
    return  this.userInfo.name +  "正在吃东西"
  }
})

• 在其他页面的js获取全局变量和函数

// 获取app实例唯一的方法
let app = getApp();
console.log(app.userInfo.name)

// 注意事项：不要在页面中调用app的生命周期
Page({
 
})

1.2.3getApp的使用

• 整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用自定义函数开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

1.2.4使用getapp的注意事项

• 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

1.3注册页面

• 对于小程序中的每个页面，都需要在页面对应的 js 文件中使用Page构造方法进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

1.3.1页面的生命周期监听函数

Page({
	 /**
	  \* 页面的初始数据
	  */
	 data: { 
	 },
	 /**
	  \* 生命周期函数--监听页面加载
	  */
	 onLoad: function (options) {
	  console.log("index load")
	 },
	 /**
	  \* 生命周期函数--监听页面初次渲染完成
	  */
	 onReady: function () {
	  console.log("index ready")
	 },
	 /**
	  \* 生命周期函数--监听页面显示
	  */
	 onShow: function () {
	  console.log("index show")
	 },
	 /**
	  \* 生命周期函数--监听页面隐藏
	  */
	 onHide: function () {
	  console.log("index hide")
	 },
	 /**
	  \* 生命周期函数--监听页面卸载
	  */
	 onUnload: function () {
	  console.log("index unload")
	 },
	 /**
	  \* 页面相关事件处理函数--监听用户下拉动作
	  */
	 onPullDownRefresh: function () {
	  console.log("下拉刷新")
	 },
	 /**
	  \* 页面上拉触底事件的处理函数
	  */
	 onReachBottom: function () {
	  console.log("加载更多")
	 },
	 /**
	  \* 用户点击右上角分享
	  */
	 onShareAppMessage: function () {
	 }
})

• 生命周期顺序（不含异步）：
  • 进入的时候：app.js的onLaunch—onshow 页面的onLoad—页面的onShow
  • 离开的时候：页面的onHide—app.js的onHide

1.3.2关于data

• data 是页面第一次渲染使用的初始数据。
• 页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
• 渲染层可以通过 WXML 对数据进行绑定。

//修改数据 
this.setData({      
  num:2 
})

• 里面放置页面初始化的数据.初始化的数据可以展示在视图层。
• this.data.键名：获取
• this.setData( {键名：new键值})：设置

	data: {
	  name:"zhangsan",
	  age:"18"
	 },
	 /**
	  \* 生命周期函数--监听页面加载
	  */
	 onLoad: function (options) {
	  this._login()
	 },
	 _login:function(){
	  console.log("login ok") 
	 },
	 _fn:function(){
	  this.setData({
	    age:2
	  })
	 },

• 页面的处理函数

// pages/demo1/demo1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      num:1,
  },
  //页面的下拉刷新，必须先把enablePullDownRef开启才可以出发该事件函数
  onPullDownRefresh(){
    console.log("demo1的下拉刷新")
    this.setData({
      num:2
    })
    console.log(this)
  },
  //默认是距离底部有50px的时候，触发该函数，如果想改变距离，设置onReachBottomDistance就可以
    onReachBottom(){
    console.log("demo1的上拉刷新")
  },

  // 页面滑动事件   
  onPageScroll(e){
    console.log("页面的滚动事件",e)
  }
  
})

1.3.3getCurrentPages

• 获取当前的页面栈，页面栈是一个数组，用户访问过的页面都记录在这个数组里,方便用户返回
• 数组中第一个元素为首页，最后一个元素为当前页面。
  • 不要尝试修改页面栈，会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

1.4小程序的页面生命周期

2小程序的视图层

2.1视图层的概念

• 框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
• 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
• WXML(WeiXin Markup language) 用于描述页面的结构。
• WXSS(WeiXin Style Sheet) 用于描述页面的样式。
• 组件(Component)是视图的基本组成单元。

2.2wxml（小程序的结构）

• 放置组件+要渲染的数据
• 数据绑定

 {{msg}} 








{{1+2+num}}



{{1+2+"3"}}

{{1+"2"+3}}

{{ store>=60?"及格":"不及格" }}


 {{arr[0]}}
 {{arr[1]}}
 {{arr[2]}}
 
   {{obj.name}}------{{obj.text}}
 

 
 

• 注意:无论是普通的数据绑定，还是属性绑定，或者是其他的，只要进行数据渲染，都需要加{{}}
• 列表渲染

  
      {{index}}-------{{item}}

 

 
   {{index1}}-------{{item1}}
   {{index}}




  {{index}}-----{{item}}

pages/demo2/demo2.wxml

   {{index}}------ {{item}}




  {{index}}-----{{item.id}}-----{{item.name}}------{{item.price}}







  {{item}}




  {{item}}




  
      {{item}}
  

• 条件渲染

pages/demo3/demo3.wxml



 
 
 及格

 
 

 

 
 优秀
 中等
 不及格

 
 
 

 内容一


 

数据绑定

{{name}}
{{age}}

绑定属性

{{age}}

关键字的处理

• true和false是关键字，使用时也要使用{{}}

运算

• 算术运算

{{age+1}}

• 逻辑运算

• 字符串运算

{{name+"三"}}

• 路径运算

{{arr[0]}}
{{user.height}}

• 三元运算符

{{user.height}}

2.2.2列表渲染

  data: {
    name:"zhangsan",
    age:17,
    title:"我是标题",
    arr:[1,2,3],
    user:{
        height:180,
        weight:"150"
    },
    goods:[{
        id:1,
        name:"小米"
    },{
        id:2,
        name:"华为"
    }],
    string:"abcdefg"
  },

--------遍历数组-----------

  {{index}}---{{item}}


  {{key}}---{{vo}}

--------遍历对象-----------

  {{index}}---{{item}}


  {{key}}---{{vo}}

--------遍历数组对象-----------

  {{index}}---{{item.id}}---{{item.name}}

--------遍历字符串-----------

  {{index}}---{{item}}

--------遍历数字-----------

  {{index}}---{{item}}


  {{item.id}}
  {{item.name}}

block是包裹元素

• 不会渲染到页面上，不能在上面写属性

wx：key

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

• wx:key 的值以两种形式提供

  • 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  • 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

• 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

• 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

2.2.3条件渲染

• 使用判断时也可以使用block包裹元素

成年

成年
未成年

成年
青少年
少年

wx:if vs hidden

• 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
• 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

2.2.4模板（了解）

• 什么是模板
• WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
• 如何定义模板

name="名字"

• 如何使用模板

is="相对应的模板名字"

• 在其他页面使用模板

• 模板的传参

要在模板中定义

pages/demo4/demo4.wxml

• 在页面文件中使用

• 引用
• import和inclue引入

include 可以将目标文件除了