文章目录
前言
微信小程序入门2
学习自黑马程序员
0 全笔记链接
笔记1 微信小程序入门1
1、WXML模板语法
1.1 数据绑定
通过{ { }}插值表达式 我们可以实现数据的绑定
例子如下
data: {
info: 'hello boy',
img: 'https://pic3.zhimg.com/v2-58d652598269710fa67ec8d1c88d8f03_r.jpg?source=1940ef5c',
random1: Math.random().toFixed(2)
},
<view>{
{
info}}</view>
<image src="{
{img}}"></image>
<view>数值如下{
{
random1 * 100}}</view>
1.2 事件绑定
1.3 事件传参与数据同步
1.31 事件传参
//+1的事件处理函数
heloo1(e){
console.log('ok')
this.setData({
count:this.data.count + 1
})
},
1.32 bindinput
1.4 条件渲染
用block而不是view包裹可以提高渲染的性能
避免渲染非必要的节点
1.5 列表渲染
没有Id可以直接把index当做Key值使用
2 WXSS 模板样式
2.1 wxss基本介绍
2.2 rpx单位
2.3 样式导入
/* 导入在common中定义的样式 */
@import "/common/common.wxss" ;
2.4 全局样式和局部样式
这个view的权重是（0,0,1）
3 全局配置
3.1 常用的全局配置项
3.2 window–导航栏
3.3 window–下拉刷新
3.4 window–设置上拉触底距离
3.5 tapbar
举例
这里贴出了整个app.json 全局配置文件的内容
{
"pages": [
"pages/okok/okok",
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "YYL的小程序",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef"
},
"tabBar": {
"list": [
{
"pagePath": "pages/okok/okok",
"text": "okok"
},
{
"pagePath": "pages/index/index",
"text": "index"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
最终效果如图所示
3.6 tapBar案例
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact",
"pages/okok/okok",
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}]
},
最终效果如下所示
4 小程序的页面配置
5 数据请求
5.1 微信中数据请求的限制
5.2 配置request合法域名
5.3 发起get请求(须先配置好request的合法域名)
wxml中的代码内容
页面js文件中的代码内容
getInfo(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/get',
method:'GET',
data:{
name:'yyl',
age:12
},
success: (res) =>{
console.log(res.data)
}
})
},
结果
5.4 发起post请求
步骤和发起get请求基本类似
这里只粘贴JS代码
postInfo(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/post',
method:"POST",
data:{
name:'yyl'
},
success: (res)=>{
console.log(res.data)
}
})
},
5.5 在页面刚加载时请求数据
我们只需要把想在页面加载时就调用的函数放到onLoad函数中就可以了
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getInfo(),
this.postInfo()
},
5.6 request请求的注意事项
注意 项目的部署还是需要https的
5.7 本地生活首页 案例编写
6 页面导航
6.1 声明式页面导航
6.2 编程式导航
6.3 导航传参
7 页面事件
7.1 下拉刷新
7.2上拉触底
案例
只有在请求完成后才允许进行下一次请求。
js文件内容
// pages/contact/contact.js
Page({
/**
* 页面的初始数据
*/
data: {
colorList:[],
//作为节流阀控制请求
isLoding: false
},
//获取颜色的方法
getColors(){
this.setData({
isLoding: true
})
wx.showLoading({
title: '数据加载中...',
})
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'GET',
success: ({
data: res})=>{
console.log(res)
this.setData({
colorList: [...this.data.colorList,...res.data]
})
},
complete: ()=>{
wx.hideLoading()
this.setData({
isLoding: false
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if(this.data.isLoding) return
this.getColors()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
wxml文件内容
<view wx:for="{
{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
{item}});">{
{
item}}</view>
Wxss文件内容
/* pages/contact/contact.wxss */
.num-item {
border: 1rpx solid #e60d0d;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
8 生命周期
9 wxs
9.1 wxs概念
9.2 wxs的基本用法
1 定义内嵌的wxs脚本
<view>{
{
m1.Upper(name)}}</view>
<wxs module="m1">
module.exports.Upper = function(str){
return str.toUpperCase()
}
</wxs>
2 定义外联的wxs脚本
wxml
<view>{
{
m2.upup(country)}}</view>
<!-- <wxs src="../../utils/test.wxs" module="m2"></wxs> -->
<wxs src="/utils/test.wxs" module="m2"></wxs>
.wxs文件
function upup(str){
return str.toLowerCase()
}
module.exports = {
upup: upup
}
9.3 本地生活案例 列表页编写
10 自定义组件
10.1 组建的创建和引用
10.2 自定义组件的样式
10.3 自定义组件 数据和方法和属性
10.4 自定义组件 数据监听器
// components/test2/test2.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
n1: 0,
n2: 0,
sum: 0
},
/**
* 组件的方法列表
*/
methods: {
addN1(){
this.setData({
n1: this.data.n1 + 1
})
},
addN2(){
this.setData({
n2: this.data.n2 + 1
})
}
},
observers:{
'n1, n2':function (new1,new2) {
this.setData({
sum: new1 + new2
})
}
}
})
10.5 数据监听器案例
observers: {
// 'rgb.r,rgb.g,rgb.b': function(r,g,b){
// this.setData({
// fullColor: `${r},${g},${b}`
// })
// }
'rgb.**' : function(object) {
this.setData({
fullColor: `${
object.r},${
object.g},${
object.b}`
})
}
}
10.6 自定义组件 纯数据字段
10.7 自定义组件 组件的生命周期函数
注意 在lifetimes 定义的会覆盖掉旧方式定义的生命周期函数
lifetimes: {
created(){
console.log('ceqweq')
},
attached(){
console.log('atqweq')
},
},
10.7 自定义组件 组件所在页面的生命周期函数（组件内部监听页面变化）
10.8 自定义组件 组件插槽
11 组件通信
11.1 属性绑定(父组件向子组件传递数据)
11.2 自定义事件 （子组件向父组件传递数据）
11.3 selectcomponent 获取组件实例
getget(){
// 根据类选择器获得子组件实例
const child = this.selectComponent('.a')
console.log(child)
//为获得的子组件赋值
child.setData({
count: child.data.count + 1
})
//调用获得的子组件中的方法
child.add()
},
11.4 behaviors
12 使用vant组件库
官网链接如下
https://vant-ui.github.io/vant-weapp/#/home
12.1 安装vant组件库
可以参考官方文档的快速上手
https://vant-ui.github.io/vant-weapp/#/quickstart#bei-jing-zhi-shi
1
我们首先npm init来在项目中初始化 package.json （-y代表接受默认的配置）
它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件
2 使用如下命令安装1.3.3版本的vant
npm i @vant/weapp@1.3.3 -S --production
3
4 点击项目的构建npm
打开开发者工具
工具—》构建npm
5 使用vant组件
12.2 使用css变量定义vant主题样式
去这个网址找到对应的项
https://github.com/vant-ui/vant-weapp/blob/dev/packages/common/style/var.less
page是根节点 在其中定义全局生效
然后可以在全局的app.wxss中自定义vant主题样式
13 小程序api的promise化
npm i --save miniprogram-api-promise@1.0.4
注意在安装好包后需要重新构建npm
建议先删除
后再进行构建
以免出现问题
import {
promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {
}
promisifyAll(wx,wxp)
async getInfo(){
const {
data : res} = await wx.p.request({
method: 'get',
url: 'https://applet-base-api-t.itheima.net/api/get',
data: {
name: 'a',
age: 25
}
})
console.log(res)
},
控制台结果
通过promise化简化了代码
14 全局数据共享
14.1 初步了解全局数据共享和MobX
首先记得在你的项目根目录
npm init -y
进行初始化
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
完成命令后点击进入工具构建npm
14.2 全局数据共享-创建Store实例并定义计算属性与astions方法.
js的写法如下
//在这个文件中 专门创建store的实例对象
import {
observable,action} from 'mobx-miniprogram'
export const store = observable({
//数据字段
numA: 1,
numB: 2,
//计算属性
get sum(){
return this.numA + this.numB
},
//actions 函数 专门来修改store中的数值
updateNum1: action(function(step){
this.numA += step
})
})
14.3 全局数据共享-在页面中使用Store中的成员
1 引入定义的store
import {
createStoreBindings} from 'mobx-miniprogram-bindings'
import {
store} from '../../store/store'
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.storeBindings = createStoreBindings(this,{
//数据源
store,
//使用哪些属性
fields: ['numA','numB','sum'],
//使用哪些方法
actions: ['updateNum1']
})
},
相当于这些numA numB等已经挂在到当前页面上了
可以直接使用
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//页面卸载后处理
this.storeBindings.destroyStoreBindings()
},
页面卸载后进行一定的处理
wxml文件内容如下
<view>{
{
numA}} + {
{
numB}} = {
{
sum}}</view>
<van-button bindtap="a" data-step="{
{1}}">+1</van-button>
<van-button bindtap="a" data-step="{
{-1}}">-1</van-button>
定义的Bindtap函数内容如下
a(e){
console.log('a')
console.log(e)
this.updateNum1(e.target.dataset.step)
},
14.4 全局数据共享-在组件中使用Store中的成员
// components/a.js
//实现Mobx
import {
storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {
store} from '../store/store'
Component({
//实现自动绑定
behaviors: [storeBindingsBehavior],
storeBindings: {
//数据源
store,
//字段 计算字段和普通字段
fields: {
numA:'numA',
numB:'numB',
sum:'sum'
},
//方法
actions: {
updateNum1:'updateNum1'
}
},
})
绑定之后就可以直接使用自定义全局内的数据了
15 分包
15.1 分包的基础概念
15.2 分包的基本用法
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"subPackages": [
{
"root" : "pakA",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
},
{
"root" : "pakB",
"pages": [
"pages/apple/apple"
]
}
],
15.3 独立分包
15.4 分包预下载
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"preloadRule": {
"pages/contact/contact" : {
"packages": ["p1"],
"network" : "all"
}
},
16 tabBar的进一步配置
16.1 配置tabbar自定义
请参考链接
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
需要新建custom-tab-bar文件夹
并在其中内部新建index组件
最终效果 使用了我们自定义的tabBar
16.2 使用vant weapp自定义tabbar
接着我们使用vant组件库来自定义tabbar效果
来到如下页面
https://vant-ui.github.io/vant-weapp/#/tabbar
参考基础用法来使用自定义tabBar页面
16.3 渲染美化tabBar上的数字徽标
在自定义组件中使用vant
需要设置一个选项
options: {
//开启样式覆盖
styleIsolation: 'shared'
},
接着在Wxss中进行如下设置美化数字徽标效果
/* custom-tab-bar/index.wxss */
.van-tabbar-item{
--tabbar-item-margin-bottom: 0;
}
16.4 实现tabbar页面的切换效果(使用默认的方式出现切换问题)
思路： 将在页面中的定义active转为
在全局共享组建中定义
并在全局组建中设置更改其的方法
1 全局组件全部代码
//在这个文件中 专门创建store的实例对象
import {
observable,action} from 'mobx-miniprogram'
export const store = observable({
//数据字段
numA: 1,
numB: 2,
//用于实现tabbar页面切换 索引值
activeTabbarIndex: 0,
//计算属性
get sum(){
return this.numA + this.numB
},
//actions 函数 专门来修改store中的数值
updateNum1: action(function(step){
this.numA += step
}),
// 用于实现tabbar页面切换 重新为索引赋值
updateactiveTabbarIndex: action(function(index){
this.activeTabbarIndex = index
})
})
2 自定义tabbar的js文件中的方法定义
/**
* 组件的方法列表
*/
methods: {
onChange(event) {
// // event.detail 的值为当前选中项的索引
// this.setData({ active: event.detail });
//通过全局组件中定义的方法更改全局组件中定义的索引值
this.updateactiveTabbarIndex(event.detail)
//实现tabbar页面跳转
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
全部代码如下
// custom-tab-bar/index.js
//实现Mobx
import {
storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {
store} from '../store/store'
Component({
//实现自动绑定
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: {
sum:'sum',
active: 'activeTabbarIndex'
},
actions: {
updateactiveTabbarIndex:'updateactiveTabbarIndex'
}
},
//监听数据变化
observers: {
'sum': function(val){
console.log(val)
this.setData({
'list[1].info' : val
})
}
},
options: {
//开启样式覆盖
styleIsolation: 'shared'
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
"list": [
{
"pagePath": "/pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},
{
"pagePath": "/pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png",
info: 2
},
{
"pagePath": "/pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
/**
* 组件的方法列表
*/
methods: {
onChange(event) {
// // event.detail 的值为当前选中项的索引
// this.setData({ active: event.detail });
this.updateactiveTabbarIndex(event.detail)
//实现tabbar页面跳转
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
})
3 自定义tabbar的wxml文件写法如下
<van-tabbar active="{
{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{
{list}}" wx:key="index" info="{
{item.info ? item.info : ''}}">
<image
slot="icon"
src="{
{item.iconPath}}"
mode="aspectFit"
style="width: 25px; height: 25px;"
/>
<image
slot="icon-active"
src="{
{item.selectedIconPath}}"
mode="aspectFit"
style="width: 25px; height: 25px;"
/>
{
{
item.text}}
</van-tabbar-item>
</van-tabbar>
16.5 修改tabBar选中项的颜色值
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。