微信小程序

最新推荐文章于 2024-07-26 11:41:15 发布

都柏林往事

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量242

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45824445/article/details/104129051

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

微信小程序复习笔记（一）

官方解释：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的用户体验。
小程序是微信生态的一部分，它提供了一种更加方便和高效的用户交互方式。
在这里插入图片描述
小程序的出现带来了：
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
评论
微信小程序

微信小程序复习笔记（一）官方解释：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的用户体验。小程序是微信生态的一部分，它提供了一种更加方便和高效的用户交互方式。小程序的出现带来了：1.用户使用的便捷性2.远好于公众号和h5的页面体验3.释放手机内存空间4.让手机桌面更加简洁小程序开发的必要性：由于小程序各种好处，使用小程序的用户会越...
复制链接

扫一扫

专栏目录