微信小程序--入门笔记

1. 项目结构

微信小程序--入门笔记_第1张图片

  • 文件夹下的文件名要保持一致,但可以不同于文件夹。
  • 在app.json的pages里面设置新的page,IDE会自动生成该page目录即相关文件
  • 在app.json的pages里面第一个page默认为启动页面

2. 页面组织结构

  • [page_name].js:页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理
  • [page_name].wxml:用于定义页面中元素结构,遵循xml语法
  • [page_name].json(可选):设置当前页面的window配置,它会覆盖app.json的window配置(它不同于app.json,它只能设置window配置)
  • [page_name].wxss(可选):用于定义页面的样式,遵循CSS语法,扩展了CSS基本用法和长度单位(rpx响应式像素,任何屏幕宽度都是750rpx),wxss可以使用@import "../other/other.wxss"来导入其它wxss文件
  • https://github.com/Tencent/weui-wxss 可以获取官方定义的样式

3. 小程序配置文件

小程序的配置文件可以在两个地方出现,一个是根目录下的app.json,另外一个地方就是每个page下面的json文件,两者有点区别:app.json包含'pages'(页面),'window'(窗口),'tabBar'(标签栏),'networkTimeout'(网络请求相关),'debug'(调试模式)配置选项,而页面的json只能配置window类的属性,且覆盖根目录属性。

3.1. pages

第一个为启动页面
如果设置的页面不存在,IDE自动补齐文件

3.2. window

backgroundTextStyle: 'dark | light' 下拉刷新时候的文字风格
enablePullDownRefresh: true | false 是否启动下拉刷新功能
disableScroll: true | false 只能在页面中设置,不能再app.json中设置

3.3. tabBar

list[{},{}]中存放标签栏的每个导航,至少要两个才能启用
在list中定义了路径的页面才会显示标签栏,没有在标签栏中定义路径的页面进入后不会显示tabBar
color,selectedColor,backgroundColor:可以设置tabBar中文字颜色、选中文字颜色和背景色,它们与list同级

position: bottom | top 如果设为top,那么tabBar会到顶部显示

4. 应用的生命周期

app.js定义应用的生命周期函数
App({对象}):用于创建一个应用实例对象,在它内部定义应用生命周期函数

  • onLaunch:在整个应用启动是触发,只触发一次
  • onShow:应用程序从后台状态转换到前台状态(显示到屏幕上)时触发
  • onHide:应用程序隐藏到后台时触发
  • onError(msg):在应用运行过程中出错时触发,传入的参数msg为字符串

在App中除了定义生命周期函数外,还可以定义任何成员,这些成员就是全局对象,在页面用app=getApp()获取全局唯一的app对象,然后通过app.成员来访问

5. 页面的生命周期

[page_name].js定义页面的生命周期函数
Page({}):用于创建一个页面实例对象。

  • onLoad:页面加载,做数据的初始化
  • onShow:页面显示(从后台到前台)
  • onHide:页面转为后台
  • onReady:页面数据渲染完成(只有页面加载完成,才能设置标题)
  • onUnload:当前页面被销毁(被隐藏的不算被销毁),可以在页面卸载之前保存状态

6. 数据绑定和WXS

页面的数据被规定必须放在逻辑页面的data对象里,data对象的属性可以被页面直接访问到。
页面访问的时候需要用{{ var_name }}小胡子语法(mustache)来输出。它可以作用在元素的内容和属性上。
页面中只要被“”号包裹的值都是字符串类型,如果要用到boolean或其他类型值,可以用小胡子语法来声明有类型的值。
data对象只能暴露数据成员,函数成员没法暴露,在视图中定义函数:(必须遵循commonjs规范)


  module.exports = {
    f1:function(str){
      return str+'ok';
    }
  }

使用{{ name.f1(x) }}在视图中使用。

7. 控制属性

7.1. 条件渲染

在逻辑文件中用this.setData({ data1='string1' })方式设置值,然后在页面文件中用控制属性来使用值。控制属性如下:





在需要包裹元素的时候,可以用标签来实现,它不会影响原有的布局。

7.2. 列表渲染

控制属性如下:


	
		{{ i }}
		{{ s.name }}
		{{ s.age }}
	

如果不制定for-item默认为item变量,不制定for-index默认为index变量,key设置的值是遍历数据单项的属性名,不需要小胡子语法,还可以通过*this来制定当前被遍历的元素。

8. 事件处理

在视图页面绑定事件处理函数,在逻辑页面定义事件处理函数。具体事件根据元素不同而有所区别,可以参考开发文档。在事件中用bind+事件名来绑定,如果要阻止事件冒泡就用catch+事件名来绑定。
事件传参:用data-属性来实现,在逻辑页面获取事件函数参数e.target.dataset的属性来获取

9. 单向数据流

data数据在视图页面通过小胡子语法直接绑定;
如果要从视图改变逻辑页面的数据,要通过视图中的事件来实现;
事件回传的数据要再次改变视图页面,必须用setData({})来实现。

你可能感兴趣的:(其它开发)