微信小程序复习笔记(一)
官方解释:微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的用户体验。
小程序是微信生态的一部分,它提供了一种更加方便和高效的用户交互方式。
小程序的出现带来了:
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文件种做配置