美文网首页
微信开发基础

微信开发基础

作者: 理想三旬7 | 来源:发表于2018-07-12 17:10 被阅读0次

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

相关文章

  • 微信小程序开发教程(基础篇)3-app.js 解析

    微信小程序开发教程(基础篇)1-初识微信小程序微信小程序开发教程(基础篇)2-微信小程序结构概览 上一篇教程中写道...

  • 微信开发基础

    1.项目目录结构 1.1,app.json配置 1.11,pages属性 注意:数组第一项为初始页面 1.12,...

  • 微信开发基础

    微信开发,由于语言换成了node,原来的微信开发环境都得重来,顺便记录一下步骤。 前提: 需要在微信公众号上进行一...

  • 微信砍价系统开发

    微信砍价系统开发【176微电8841同号1028,蒋经理】微信砍价系统定制 什么是微信砍价? 微信砍价以微信为基础...

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

  • 微信小程序学习入门(一)

    1.基础知识 1.开发工具:微信专门配备的微信Web开发者工具。 2.微信Web开发者工具可以通过扫码登录,发布小...

  • 【编程干货】微信公众号开发基础课程

    微信拥有庞大的用户基础,微信公众号的相关开发也比较热门,本套课程就带领大家进入Java微信公众号开发的精彩世界,学...

  • C#开发微信门户及应用(24)-微信小店货架信息管理

    在前面微信小店系列篇《C#开发微信门户及应用(22)-微信小店的开发和使用》里面介绍了一些微信小店的基础知识,以及...

  • 【技术】微信小程序之云开发

    1.前言 微信开发者工具从基础库 2.2.3 开始支持云开发能力,开发者无需搭建服务器即可使用云开发开发微信小程序...

  • 微信开发-基础篇

    之前写了微信开发的配置篇,很多朋友说还是不了解微信怎么与后台交互的,但是想想写的太深还不如去看微信开发文档,所以写...

网友评论

      本文标题:微信开发基础

      本文链接:https://www.haomeiwen.com/subject/uybkuftx.html