cc小程序笔记

文件介绍

  • sitemap.json 站点地图 微信搜一搜里面哪些页面可以展示,哪些不能
  • project.config.json 项目配置
  • app.js 全局业务逻辑
  • app.json 全局的小程序配置
  • app.wxss 全局的样式
  • pages 存放页面的文件夹
  • ——index 首页页面文件夹
  • ——index.js 首页的业务逻辑
  • ——index.json 首页的配置
  • ——index.wxml 首页的模板(html)
  • ——index.wxss 首页的样式(css)
  • ——logs 日志页面文件夹
  • utils 存放工具的文件夹

生命周期函数

小程序中的生命周期函数主要有以下几类:

  • 应用实例
  • 页面实例
  • 组件实例

应用的生命周期

onLuanch——小程序实例初始化
onShow——小程序启动,或从后台进入前台显示
onHide ——小程序隐藏,或从前台进入后台
onError——当小程序发生脚本错误,或者 api 调用失败时
onPageNotFound——当小程序出现要打开的页面不存在的情况

页面的生命周期

onLoad——页面资源加载完毕
onShow——页面显示(但不代表页面已经绘制完毕)
onReady——页面初次渲染完成
onHide—— 页面隐藏
onUnload—— 页面被卸载

组件实例

created——创建组件实例,注意此时无法使用 this.setData 方法
attached——组件实例进入页面节点树时执行
ready——组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery )
moved ——组件实例被移动到节点树另一个位置时执行
detached ——组件实例被从页面节点树移除时执行

小知识

  1. wxml根元素不是body,是page
  2. 直接渲染内容使用插值表达式,双花括号
  3. 使用bindtap来绑定事件
  4. 方法直接使用构造器(js文件)里
  5. 事件传递参数,用event对象来进行传递,但是必须使用自定义属性"data-xxx=‘yyy’",然后在事件里通过event.currentTarget.dataset.xxx获取
  6. bind方法触发的是事件冒泡,组织事件冒泡可以把bind换成catch就可以阻止事件冒泡了
  7. 改变data的数据和vue不一样,必须使用原生的方式来获取到data的值,然后需要像react的setData方法来改变data里的值,才会让视图实时更新
  8. 路由:
    第一种跳转:tabs
    第二种跳转wx.navigateTo – 可以跳转到应用内的非tabbar页面。
    第三种跳转到tabbar页面用wx.switchTab方法
    第四种方法使用navigator组件
  9. 路由传参:通过URL?key=value1&key2=value2这种方式来传参,目标页面直接在onLoad(options){}这里接收,options是参数对象

配置

  • 全局配置:app.json内配置
  • 页面配置:每个小程序页面对应的.json文件内配置,并且页面配置项在当前页面会覆盖app.json的window中相同的配置项
  • sitemap配置:sitemap.json 文件用于配置小程序及其页面是否允许被微信索引

视图与渲染

1. 关于模板

  • include 适合引入组件文件(全部复制过去)
  • import 可以用来引用模板,在开发中可以避免相同模板的重复编写
  • import 引用的模板必须要用template包裹,并且要设定模板的name属性
  • 使用方法include、src配套使用,import、src、template、is配套使用
  • 在src写路径的时候,相对路径的…是两个点,不是三个点

2. 为按钮绑定点击事件
.wxml文件

 <button type='primary' bindtap='btnclick'> primary</button>

.json文件

btnclick:function(){
  //点击按钮后执行的动作
}

3. 条件渲染
if里面是true就会显示,是false就不显示。
4. 循环标签
.json文件

Page({
 data: {
   info:[
     {
       suject:"语文",
       score:"95"
     },
     {
       suject: "数学",
       score: "99"
     },
     {
       suject: "英语",
       score: "100"
     }
   ] 
  }
})

.wxml文件

<view class='content'>
 <view wx:for="{{info}}">
   <text>科目:{{item.suject}}</text>
   <text>成绩:{{item.score}}</text>
 </view>
</view>

微信小程序事件

常见的点击事件有

  • 点击事件 tap
  • 长按事件 longtap
  • 触摸事件 touchstart touchend touchcancel touchmove(touchend是正常结束触摸,touchcancel是意外结束)
  • 其他 submit input…
<view class='view1' bindtap='click1' id='view1' data-id="100" data-title="新闻标题">
   view11
   <view class='view2' bindtap='click2' id='view2'>
       view22
       <view class='view3' bindtap='click3' id='view3'>
         view33
       </view>
   </view>
</view>

如果像上面的代码一样,那点击view3必定会发生事件冒泡,解决办法就是将bindtap事件换成catchtap事件

微信小程序页面的数据传递

实验目标:从index页面转到logs页面,index页面的数据传到logs页面。

方法1:使用bindtap实现跳转
index页面代码

itemClick: function () {
    wx.redirectTo({
      url: '../logs/logs?data=100',
    })
}

logs页面代码

onLoad: function (options) {
    console.log("--logs--onLoad--")
    console.log(options)
  }

然后logs页面加载完成后就会打印出data

方法2:使用navigator实现跳转
index页面代码

 <navigator url='../logs/logs?data=100'>
   <view class="myclass" > 
     <text>Part1</text>
   </view>
</navigator>

logs页面代码和上面一样
如果想要页面跳转了不能返回,则只需要添加redirect即可。

<navigator url='../logs/logs?data=100' redirect>

多个数据传递,数据间用&连接:

<navigator url='../logs/logs?data=100 & id=100 & x=100' redirect>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页