微信开发基础

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自定义组件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

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