微信开发基础

1.项目目录结构

新建项目目录

1.1,app.json配置

内容
属性及功能

1.11,pages属性

pages属性

   注意:数组第一项为初始页面

1.12,window属性

window属性
window属性演示

1.13,tabBar属性

tabBar属性简介

1.131,tabBar -- list属性详解

list属性

注意:1.当设置 position 为 top 时,将不会显示 icon

             2.tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

1.14,networkTimeout网络事件设置

networkTimeout详情

1.15,debug调试属性

debug属性

2,page.json配置

app.json对全局页面配置。page.json单个页面配置,覆盖全局配置。单个页面配置,只配置本页面窗口表现,window,可省略。

page.json简介
page.app的window属性
内容,省略window

2,逻辑层 (.js)

2.1,App()

            App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

周期函数

        也可以再其中添加数据,则为全局数据:globalData:'I am global data'

代码块

2.11,onLaunch,onShow参数

onLaunch,onShow参数

 referrerInfo.appId来应用场景值

(后期详解)

2.12,onPageNotFound参数

2.13,getApp()函数

            可以用来获取到小程序实例

2.14,注意事项

    1.App() 必须在 app.js 中注册,且不能注册多个。

    2.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

    3.不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

    4.通过 getApp() 获取实例之后,不要私自调用生命周期函数。

2.2,场景值

        可以在 App 的 onlaunch 和 onshow 中获取上述场景值,部分场景值下还可以获取来源应用、公众号或小程序的appId。

         referrerInfo.appId来应用场景值

2.3,注册页面

        Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

2.31,Page() 函数参数列表

参数列表

2.32,data页面数据初始化

2.33,周期函数

周期函数

2.34,页面处理函数

滑动事件
转发事件

2.35,Page.prototype.route属性

基础库 1.2.0 开始支持,低版本需做兼容处理

route 字段可以获取到当前页面的路径。

2.36,Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

2.37,setData()

setData示例

2.4 页面路由

2.41 getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

2.42 路由方式

注意:

2.5 模块化

2.51 文本作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在App() 中设置。

2.52 模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

要注意的是:

exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。

小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

3. 视图层(.wxml,wxs,wxss)

3.1 WXML

3.11 标签

 后面组件详解

3.12 数据绑定(跟vue很像)

同vue一样,也可以在{{}}中进行数据计算

3.13 渲染指令

wx:for 列表渲染,遍历

wx:if,  wx:elseif,  wx:else 条件渲染

3.14 事件绑定

    bindtap="事件名"

3.15 template模块

定义模板

使用 name 属性,作为模板的名字。然后在templete模板中定义代码块。

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如

3.16 引用

WXML 提供两种文件引用方式importinclude

import引用

import作用域

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。


include引用

3.2 WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。类似html中的javascript脚本语言。

注意:

WXS 代码可以编写在 wxml 文件中的  标签内,或以 .wxs 为后缀名的文件内。

每一个 .wxs 文件和  标签都是一个单独的模块

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

每个 wxs 模块均有一个内置的 module 对象。

属性

exports: 通过该属性,可以对外共享本模块的私有变量与函数。

src:引用 .wxs 文件的相对路径。仅当本标签为单闭合标签标签的内容为空时有效。

注意

        wxs 模块只能在定义模块的 WXML 文件中被访问到。使用  include或  import时,wxs 模块不会被引入到对应的 WXML 文件中。

       <template>标签中,只标签标签标签能使用定义该<template>的WXML 文件中定义的 wxs模块。标签标签标签标签标签标签标签标签标签

3.3 WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

尺寸计算:

   样式导入(外联)


样式导入(内嵌)

选择器

3.4 组件


3.5自定义组件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:理解视图层 类似于“视图引擎模板”(jsp,freemaker,velocity,thymeleaf等) 框...
    Reg8888阅读 1,502评论 1 0
  • 微信小程序代码复用技术-模板/组件/插件 MD by Jimbowhy and you can visit my ...
    坚果jimbowhy阅读 10,935评论 1 13
  • 2.4.2 WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结...
    wangbu2阅读 1,316评论 0 2
  • 今天科室请人来讲课,我负责拍照,感觉还不错,今天超级饿,也很累, 已经把还ok的照片筛选出来了,也许应该拷在自己的...
    赵小乖棒棒哒阅读 242评论 0 0
  • 有时,时光很慢,比如童年。 热血传奇,苹果手表,暗黑国服,马云到台湾讲演。时间,泡茶,啃骨头。 习惯闭口无言,不拒...
    老资情调阅读 205评论 0 0