小程序笔记1

API 小程序的宿主环境

协同工作和发布
项目成员的组织结构：
成员管理的两个方面：管理员对项目成员以及体验成员的管理
不同项目成员对应的权限：
开发者：
开发者权限 体验者权限 登陆权限 开发设置 腾讯云管理权限
添加项目成员和体验成员

小程序版本分类

开发版本
体验版本 开发过程中的
审核中版本 选取一个体验版审核
线上版本 审核之后

发布上线的过程
上传代码
后台查看发布之后的版本 管理–版本管理–提交审核–通过之后发布

推广
获取小程序码
设置–基本信息填写–下载

运营数据
1.统计–查看数据
2.微信搜索 “小程序数据助手”–

数据绑定
数据绑定
1.数据绑定的基本原则
2.在.js文件中的data中定义数据
3.在wxml中使用数据 {{}}

动态绑定属性
1.属性{{}}
三元运算
1.{{}}
算数运算
1.{{}}

事件绑定
1.事件 渲染层到逻辑层的通讯方式
Tap input change
2.事件出发的时候收到一个事件对象event 属性如下

3.target和currentTarget区别
.target是触发该事件的源头组件 currentTarget是当前事件所绑定的组件
点击内部按钮时 事件以冒泡的形式向外扩散 触发外层的view的tap事件处理函数
此时target是内部的按钮组件 currentTarget是view

4. 语法bindTap
   ①.wxml中为组件绑定tap触摸事件
   ②.js文件中定义对应的事件处理函数 通过形参event接受

5.通过事件处理函数为页面中的数据赋新值
countChange(){
    console.log(‘ok’);
    this.setData({
      count:this.data.count + 1
      
    })
    console.log(this.data.count);
  },

6. 事件传参
   小程序中bindtap后面的引号 代表的是事件处理函数的名字 不能写一个小括号进行传参
   在e.target.dataSet可以查看
   bindtapNumber(e){
       console.log(e);
       this.setData({
         count:this.data.count+e.target.dataset.info
       })
     },

 +info
input绑定
定义数据
渲染结构
绑定input事件处理函数
Wxss
input{
  border:1px solid aqua;
  margin:  0 auto;
}
Wxml

同步文本框的值的改变
.js
inputHandler(e){
    // console.log(e.detail.value);
    this.setData({
      msg:e.detail.value
    })
  },
.wxml

7.条件渲染
1 使用wx:if=”{{condition}}”来判断是否需要渲染该代码块
1
2
3
2 结合和wx:if来一次性控制多个组件的渲染和隐藏
不是组件 是一个包裹性质的容器 不会再页面中做任何的渲染
3 hidden=”{{condition}}”也可以控制页面的隐藏或者显示 condition是true的时候是显示
4 wx:if 和 hidden的对比
wx:if以动态创建和移除元素的方式控制元素的展示和隐藏
Hidden以切换样式display:none/block来控制元素的显示与隐藏
使用建议 频繁切换用hidden 控制条件复杂 用 wx:if wx:elif wx:else
8.列表渲染
1wx:for
索引是{{index}}  元素是{{item}}
2手动指定索引项和当前项的变量名
索引是{{idx}}  元素是{{itm}}
3 wx:key 指定唯一的key值

 {{item.name}} 

9.Wxss和css

10. 尺寸单位rpx
    1解决屏幕尺寸适配的计量单位
    整个屏幕平分宽度为750份rpx
    2单位换算rpx px

11.样式导入
1@import导入外联样式表
2
 {{item.name}} 

/* pages/dataEXercises/dataEXercises.wxss */
@import “./component/username.wxss”;
input{
  border:1px solid aqua;
  margin:  0 auto;
}

外部样式表
.username{
  color: khaki;
}

12. 全局样式 局部样式
    1局部样式 页面的.wxss文件中定义的样式 只作用于当前页面 就近原则 局部样式覆盖全局样式
    2全局样式 App.css中的样式 作用于所有的页面

全局配置
1.全局配置文件 以及页面组成结构
1app.json是小程序的全局配置文件 pages 记录所有页面的存放路径
window全局设置小程序窗口的外观
tabBar 底部
navigationBar
background
style 是否启用新版的组成样式

2. 全局配置window
   1
   2 app.json–window–navigationBarBackgroundColor

3

3.下拉刷新
1app.json–window–enablePullDownRefresh:true
2作用域小程序的每一个页面
3背景色app.json–window–backgroundColor 只能是#开头的
4loading app.json–window–backgroundTextStyle light和dark
5上拉触底的距离
app.json–window–onReachBottomDistance px单位 默认是50px
4. tabBar 顶部和底部
1 只能最少配置两个最多配置5个
2 渲染顶部tabBar时 不显示icon只显示文本
3
Button选中和不选中是两种状态
4app.json–tabBar
“tabBar”: {
    “list”: [
      {
        “pagePath”: “pages/list/list”,
        “text”: “list”
      },{
        “pagePath”: “pages/logs/logs”,
        “text”: “logs”
      },{
        “pagePath”: “pages/dataEXercises/dataEXercises”,
        “text”: “exe”
      }
    ]
  },

页面配置
1.配置单独的窗口的页面效果
2.

网络数据请求
1.小程序中网络数据请求的限制
1处于安全性考虑 小程序对数据接口的请求做出了如下两个限制 ：只能请求HTTPS类型的接口 必须将接口的域名添加到新人列表中
2. 如何配置request合法域名
1后台–开发–开发设置–服务器域名–修改request合法域名
2域名的要求 ：1不能使用IP地址和localhost 2 必须通过ICP备案3只支持http协议
3
3. 如何发起get
1wx.request()
// 发起get数据请求
  getInfo(){
    wx.request({
      url: ‘https://www.escook.cn/api/get’,//接口地址 必须基于https协议
      method:‘GET’,//请求的方式
      data:{ //发送到服务器的数据
        name:‘wxy’,
        age:20
      },
      success:(res)=>{//成功之后的回调函数
        console.log(res.data);
      }
    })
  },

4.如何发起post
postInfo(){
    wx.request({
      url: ‘https://www.escook.cn/api/post’,
      method:‘POST’,
      data:{
        gender:‘男’,
        name:‘ls’
      },
      success(res){
        console.log(res);
      }
    })
  },

5. 在页面刚加载的时候 自动请求一些初始化的数据
   1在onLoad事件中获取数据的函数 （生命周期函数）
6. 如何跳过request合法域名校验
   1详情–本地设置–不合法域名……√
   2只能够在开发和调试阶段使用
   3
7. 关于跨域和ajax
   1跨域问题只存在于基于浏览器的web开发中 由于小程序的宿主环境不是浏览器二十微信客户端 小程序中不存在跨域问题
   2ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象 由于小程序的宿主环境是微信客户端 所以小程序中不能叫做发起ajax请求而是叫做发起网络数据请求
   3

页面导航
1.两种方式
1声明式导航 navigator 点击这个组件实现跳转
指定url和openType url必须是/开头的页面地址 openType必须是switchTab
首页跳转到指定的tabBar页面 指定url(必须以/开头) open-type(表示跳转的方式 必须是swithTab)

导航到list页面

导航到left

后退

返回

2编程式导航 调用小程序的API
// index.js
  goToMessage(){
    wx.switchTab({
      url: ‘/pages/logs/logs’
    })
  },

跳转页面
跳转到非tabBar页面
goToLeft(){
    wx.navigateTo({
      url: ‘/pages/left/left’,
    })
  },

跳转到left

后退
 goToBack(){
    wx.navigateBack({
      delta: 1,
    })
  },

2. 导航传参
   1声明式导航传参
   Navigator的url属性用来指定将要跳转到的页面的路径 同时 路径的后面还可以携带参数。

跳转到left

跳转到left
接收端
onLoad(options) {
    console.log(options);
    this.setData({
        query:options
    })
  },

页面事件
1.下拉刷新
全局开启
App.json–window节点–enablePullDownRefresh设置为true
局部开启
页面的json节点–enablePullDownRefresh设置为true
为需要的页面单独开启下拉刷新
颜色 backgroundColor backgroundTextStyle配置loading的样式
{
  “usingComponents”: {},
  “navigationBarBackgroundColor”: “#00b26a”,
  “enablePullDownRefresh”:true,
  “backgroundColor”: “#223311”,
  “backgroundTextStyle”: “dark”
}
监听下拉刷新事件
点击按钮 count自增加1 下拉刷新之后重置为0
onPullDownRefresh:function(){
    console.log(“refreshing now”);
    this.setData({
      count:0
    })
  },
 addCount(){
    this.setData(
      {count:this.data.count+1}
    )
  },

count:{{count}}
自增

2.停止下拉刷新的效果
刷新之后自动关闭
onPullDownRefresh:function(){
    console.log(“refreshing now”);
    this.setData({
      count:0
    })
    wx.stopPullDownRefresh()
  },

3.上拉触底事件
1如何监听
onReachBottom:function(){
    console.log(“reaching bottom”);
  },
2如何配置上拉触底的距离
默认距离是50px 当距离下页面50px的时候默认出发事件 实际开发中根据需求修改
.json 不带单位px
{
“onReachBottomDistance”: 100
}
3案例
实现效果
localLife
4 添加loading的提示效果
wx.showLoading &wx.hideLoading
getColor(){
    wx.showLoading({
      title: ‘正在加载中~~~’,
    })
    wx.request({
      url: ‘https://www.escook.cn/api/color’,
      method:“GET”,
      success:({data:res})=>{
        this.setData({
            colorList:[…this.data.colorList,…res.data]          
        })
        wx.hideLoading()
      }})
  },
  onLoad(options) {
    this.getColor();
  },

5 节流处理
①在打他中定义isLoading节流阀
②在getColors()中修改isLoading节流阀的值
③在onReachBottom中判断节流阀的值 从而对数据请求进行节流控制
④效果展示
1.在data中定义idloading节流阀

false表示当前没有进行任何数据请求
true表示当前正在进行和数据请求
2.在getColors()方法中修改isloading节流阀的值

在刚调用getColors时将节流阀设置为true
在网络请求的complete回调函数中,将节流阀重置为false
3.在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制

如果节流阀的值为true,则阻止当前请求
如果节流阀的值为false,则发起数据请求

自定义编译模式
1.普通编译–下拉–添加编译模式–~~~ 每次编译之后都会进入该界面 以该参数
2.
3.
生命周期
1.创建–运行–销毁
2.分类
1 应用生命周期
启动–运行–销毁
onLaunch 初始化完成的时候出发一次 只有一次
onShow 小程序启动 从后台到前台的时候触发
onHide 从前台进入后台的时候触发
2 页面生命周期
加载–渲染–销毁
onLoad:function(options){} 监听页面加载 一个页面只调用一次
onShow 监听页面显示
onHide 监听页面初次渲染完成 一个页面只调用一次
onReady 监听页面隐藏
onUnload 监听页面卸载 一个页面只调用一次

3

3.什么是生命周期函数
是由小程序框架提供的内置函数 伴随着生命周期按次序执行

作用：允许程序员在特定的时间点 执行某些特定的操作

分类：
4.
5.
6.
7.