微信小程序

微信小程序复习笔记(一)

官方解释:微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的用户体验。
小程序是微信生态的一部分,它提供了一种更加方便和高效的用户交互方式。
在这里插入图片描述
小程序的出现带来了:
1.用户使用的便捷性
2.远好于公众号和h5的页面体验
3.释放手机内存空间
4.让手机桌面更加简洁

小程序开发的必要性:
由于小程序各种好处 ,使用小程序的用户会越来越多,从公司角度有自己的小程序就变得非常有必要。
一方面,为了给用户带来更加便捷的使用体验,需要开发对应一款小程序:
1开发出来的小程序,用户体验优于h5的体验,并且底层可以调用原生的各种接口;
2可以做到一端开发,多端运行(ios端、Android端)
另一方面必须抢占小程序的市场。

从技术角度探讨小程序的特点:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<text>pages/category/category.wxml</text>
<view>我是分类页面</view>
<button size="mini" bindtap="handleBtnClick">按钮</button>

<view>{{message}}</view>

在这里插入图片描述

Page
({
  data:{
    name:'Coderwhy',
    age:18,
    students:[
      { id: 110, name: 'kobe', age: 30 },
      { id: 111, name: 'james', age: 28 },
      { id: 112, name: 'curry', age: 32 },
      { id: 113, name: 'why', age: 10 },
    ],
    counter:0
  },
    handleBtnClick() {
  //     1错误做法 界面是不会刷新的 
  //  this.data.counter += 1
  //     console.log(this.data.counter)

  // 2 this.setDate()
      this.setData({
        counter: this.data.counter + 1
      })
},
    handleSubtraction() {
      this.setData({
        counter: this.data.counter - 1
      })
    }
})

// 编程范式:
// 1命令式编程:原生操作DOM
// 2声明式编程:vue/react/angular

在这里插入图片描述

<!--pages/home/home.wxml-->
<!-- 1.小程序的数据绑定 :{{}}  ->Mustache-->
<view>Hello {{name}}</view>
<view>我的年龄:{{age+20}}</view>

<!-- 2.列表展示 :wx:for-->
<view wx:for="{{students}}">{{item.name}}-{{item.age}}</view>


<!-- 3.事件监听改变data -->
<view>当前计数:{{counter}}</view>
<button size='mini' bindtap="handleBtnClick">+</button>
<button size='mini' bindtap="handleSubtraction">-</button>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

{
  "pages": [
    "pages/home/home",
    "pages/about/about",
    "profile/profile",
    "pages/category/category"
  ],
  "sitemapLocation": "sitemap81.json",
  "window": {
    "navigationBarBackgroundColor": "#ff5777",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序",
    "backgroundColor": "orange",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh":false
  },
  "tabBar": {
    "selectedColor":"#ff5777",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "assets/tabbar/category.png",
        "selectedIconPath": "assets/tabbar/category.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home.png"
      }
        ]
  }
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#ff0000",
  "enablePullDownRefresh": true
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
`在这里插入图片描述在这里插入图片描述

<!--pages/category/category.wxml-->
<text>pages/category/category.wxml</text>
<view>我是分类页面</view>
<button size="mini" bindtap="handleBtnClick">按钮</button>

<view>{{message}}</view>

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
加载完app.json之后会注册App(),是在App.JS这个文件中注册的。会在App.JS()中执行一个App({})函数,这个函数是小程序自己调用的 。执行App.JS({})这个函数的时候需要传入一个对象字面量,就跟之前执行页面的时候,在每个页面的js里面都执行handleBtnClick(){}函数并且会传入对象一样。如果在这里面有一些生命周期函数的话,他到时候就会执行这些函数。
页面由很多组成,具体会加载哪一个页面,如果首先没有配置任何编译环境的话,比如没有使用分类页面,默认情况下他会去加载在Pages里面配置的第一个页面。比如pagess/about/about放在最上面,加载的就是about这个页面,而且about在下面的tabbar就看不见了,因为它没有在下面tabbar中进行配置,tabbar也会不见。因为home在tabbar中有配置,所以在加载home页面时,这个tabbar才能看见。
等把自定义组件加载完成之后,会去加载在Pages里面配置的第一个页面,首先它会加载page.json,对jSon里面的配置它会先做一个读取,完成之后就开始加载并且渲染page.wxml,并且把这个里面的东西做一个解析,再结合它的js文件给它创造出来一个js对象,再把j文件给它转成一个真实dom给渲染出来

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    console.log("小程序初始化完成了")
  
  // wx.request({
  //   url: '',
  // })
  
  wx.getUserInfo({
    //这个是数据拿到之后再进行回调的 
    success: function(res) {
      console.log(res)
    }
  })
  },
  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200201205927380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyNDQ0NQ==,size_16,color_FFFFFF,t_70)
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    // 1判断小程序的进入场景
    console.log(options)
    switch(options.scene){
      case 1001:
      break;
      case  1005:
      break
    }

在这里插入图片描述

在下面这两个中都有options都可以判断小程序进入场景
  onLaunch: function (options) {
    console.log(options)
    这个是在小程序初始化时会执行一次
  

  onShow: function (options) {
    // 1判断小程序的进入场景
    console.log(options)
    switch(options.scene){
      case 1001:
      break;
      case  1005:
      break
    }
    这个会执行多次,如果想让他每次进来都执行一次就放到这里面来
   // 2 获取用户信息,并且获取到用户信息之后,将用户的信息传递给服务器
    wx.getUserInfo({
      success: function (res) {
        console.log(res)
      }
    })
  },
推荐用下面这种方式去获取用户信息:但是这种要求用户必须有一次点击,只有用户点击才真正授权,如果用户不点击,它不希望随随便便就弹出一个授权弹窗
<!--pages/home/home.wxml-->
<text class="title">Hello World</text>

<button size="mini"
 open-type="getUserInfo"
 bindgetuserinfo="handleGetUserInfo">
  获取授权</button>

Page
({
handleGetUserInfo(event){
  console.log(event)
}
})

在这里插入图片描述

<!--pages/home/home.wxml-->
<text class="title">Hello World</text>
2获取用户信息的方式
<button size="mini"
 open-type="getUserInfo"
 bindgetuserinfo="handleGetUserInfo">
  获取授权
  </button>
3展示用户信息的方法
<open-data type="userNickName"></open-data>

在这里插入图片描述

3展示用户信息的方法
<open-data type="userAvatarUrl"></open-data>

在这里插入图片描述

// 在app.js这儿定义的全局数据是可以在其它地方共享的
  globalData:{
    name:'coderwhy',
    age:18
  }
  比如在home.js中享用
  //pages/home/home.js
//getApp()获取App产生的示例对象 而这个示例对象有保存着 全局共享数据里面保存的那些东西 包括那些生命周期
const app =getApp()
console.log(app.globalData.name)
console.log(app.globalData.age)

  

在这里插入图片描述
如图,既然能在这儿打印,说明也能在这儿拿到这两个东西

const app =getApp()
const name = app.globalData.name;
const age = app.globalData.age
能拿到就可以在下面的page中使用这两个东西
Page
({
handleGetUserInfo(event){
  console.log(event)
}
})

在这里插入图片描述

//注册一个小程序
App({
})
//注册一个页面
Page
({
})
一般情况下,每个页面都需要调用page方法来这里注册,页面也有自己的生命周期函数

在这里插入图片描述在这里插入图片描述

//pages/home/home.js
//getApp()获取App产生的示例对象 而这个示例对象有保存着 全局共享数据里面保存的那些东西 包括那些生命周期
const app =getApp()
const name = app.globalData.name;
const age = app.globalData.age

//注册一个页面      页面也有自己的生命周期函数
Page
({
handleGetUserInfo(event){
  console.log(event)
},
//---------------
//  1.监听页面的生命周期函数
//页面被你加载出来时
onLoad() {
  console.log('onLoad')
},
//页面初次渲染完成时
onReady() {
  console.log('onReady')
},
//页面显示出来时
onShow() {
  console.log('onShow')
},
//当页面隐藏起来时
onHide() {
  console.log('onHide')
},
onUnload(){
  console.log('onUnload')
}

  })

在这里插入图片描述

真实开发中一般现在page下面定义一个list  这个list默认是空,然后再在下面onload函数中去发送一个网络请求,把请求的数据放到onload中的list:data中 ,再到home.wxml
<view>{{message}}</view>
<view wx:for="{{list}}">{{item.title}}</view>中将数据展示出来。如下

Page
({

  data:{
    message:"哈哈哈",
    list:[]

  },
handleGetUserInfo(event){
  console.log(event)
},
//---------------
//  1.监听页面的生命周期函数
//页面被你加载出来时
onLoad() {
  console.log('onLoad')
  wx.request({
    url: 'http://123.207.32.32:8000/recommend',
    success: (res) => {
      console.log(res)
      const data = res.data.data.list;
      this.setData({
        list:data
      })
    }
  })
},

<view>{{message}}</view>
<view wx:for="{{list}}">{{item.title}}</view>

在这里插入图片描述
在这里插入图片描述

view也能进行监听点击:
在js文件中
 handleViewClick(){
      console.log('哈哈哈被点击了')
    },
在wxml文件中
<view bindtap='handleViewClick'>{{message}}</view>

对于某些想做下拉刷新的页面,必须到json文件种做配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值