微信小程序开发笔记

教程资源

工具:

首先微信的开发工具目前主要是使用官方提供的.
吐槽下虽然够用, 但是操作的设计没有其他IDE那么完整, 很多快捷键的方式都不支持.

工具的各个功能模块和做用在官方文档里都有说

创建项目

打开工具后根据提示创建一个项目, AppID开始学习时不是必须的.
勾选创建quick start后会自动创建一些基本的文件

项目结构

默认创建的文件/文件夹: app.js, app.json, app.wxss | pages, utils
其中文件夹里的除了wxml 和 js 文件外的其他文件都不是必须的, CSS是页面的样式文件, json是页面的配置文件. js文件配置页面入口, wxml配置UI

app.json

pages:
配置了项目中页面的路径. 在这里写上想创建的文件的路径, 在对应的地方如果没有这个文件就会创建, 第一个文件将会是小程序启动时先显示的页面
- page.js
  - 一个page中应该有.js逻辑层文件和下xml视图层文件, 不然会报错, 在调用栈中, 根据系统的调用, js中应该有page()方法, 并有响应的声明周期参数(这个不一定, 需要用到的时候自己传入特定的处理, 否则是按默认的来, 但是page()一定要有, 不然系统调用不到), xml是自己的布局文件, 根据需要指定, 没有特殊的需要适应系统的东西
  - page()中的生命周期之外, 可以传入自定义的函数function, 传入和定义可以同时进行即: page( click: function(形参) { 函数操作, 形参操作, 注意这里传递的形参其实是默认会把一个点击事件传递进来 },)
    其实这相当于传递了一个闭包, 闭包名: 类型 {闭包体} 注意函数声明”function”后有”()”
- page.wxml
  - 用来做页面的布局和UI,
  - 在标签里进行属性声明, 或者统一在css文件中声明也可以
  - 事件绑定:
    - 冒泡绑定和非冒泡绑定, 冒泡绑定就是事件会传递给父View的事件, 有tap, longTap, longTouch, 其他都是非冒泡事件
    - bind 绑定 : 在标签的属性中添加: bindtap=”函数名”, 点击时就会去js文件中找到注册的function, 这里不用显示的传形参的话函数有传递参数要求时会默认把点击试看传递过去
    - catch 绑定: 同上, 只是吧bindtap 改成catchtap, 区别就是当前View绑定的catch, 就不会往上传递事件
utils:
app.js:
app.json:
我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.wxss:
同上

对于逻辑层对UI层的传值, 在UI层的标签中进行绑定, 使用, 里面的值可以是pages(data{…})的值, 也可以是自定义的

可以用…将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
      data: {
        obj1: {
          a: 1,
          b: 2
        },
        obj2: {
          c: 3,
          d: 4
        }
      }
    })

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

模板

有时候在很多页面都会用到一些相同的东西, 我们可以抽成模板, 在需要用到的地方导入就可以了
导入模板:


<include src="模板路径, 可以适应相对路径" /> 注意这里是单标签, 在"/>"不要忘了"/"
使用incluce是单纯的导入代码,
使用<template> 标签的话要使用 <import /> 因为模板内可以定义几个模板标签:
<import src="模板的相对路径" />
<template is="模板名字" />

定义模板:
<template name="name1">模板1</template>
<template name="name2">模板2</template>

在定义模板时还能设定一个传递的参数变量, 在使用时指定这个变量的值:
定义: <template name="name2">模板2 - {{text}}</template>
使用: <import src="模板的相对路径" />
	 <template is="模板名字", data="{{text:"导入时给模板的text设置的内容}}" />

事件

在上面时简单介绍了事件,这里记录事件传递时传递的参数
会是一个object
其中currentTarget是当前被触发事件后接收参数时的View
detail:
target: 一开始触发事件的事件源的View

配置信息的注意

就是一些属性的声明, 在app.json里, 需要注意的是:
在声明了tabBar后, pages的第一个页面一定是tabBar里的一个页面, 不然显示不了

在某个页面的json文件中的配置, 就像全局配置下的单个配置一样, 最终效果当然是页面自己设置的配置, 同理, 单独页面的配置是不能去影响诸如tabbar log等这些app层面的配置

注意: 配置文件是json格式的, 所以不能有注释

#bug: 为什么我设置单独文字时的tab没有出现

页面跳转时传递数据

在页面跳转的函数中有传递一个参数, 这个参数在跳转时表现为url后跟着的参数, 像Get请求一样.
Api文档有说明

用户登录检测学习效果

主要相关的就是:
进入到我的页面时调用load方法, 在这里判断app.json是否有userinfo, 没有的话就redirect到登录界面
输入框的输入事件绑定: inputbind=”函数名”
在input时会将输入的每个字符都会触发时间, 每次都要存, 估计可以利用微信的two bind来实现数据和界面的同步
点击登录时就将值赋给APP的userinfo, 再redirect到我的页面,
在我的页面启动时调用了load方法, 同样进入到检查userinfo方法, 这时候有值了就进入加载页面阶段

bug;

我要怎么设置输入事件的监听

CSS

终于知道CSS选择器中, class=”aaa bbb” 是什么鬼了…不是这个class是”aaa bbb”, 是这个class, 即是aaa. 也是bbb, 可以用.aaa选中, 也可以用.bbb选中

会有bindTap 无法触发函数的情况

擦…函数名字写错, 用字符串传值牺牲掉的就是确定性…

设置page的data时, 初始化的变量并没有对应类型的属性

一般js的变量没有类型的概念, 只有值才有类型的概念, 应该在load方法里初始化这个变量, 设置她为对应的模型