欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 金于虎:微信小程序认知、安装与demo学习摘要

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

金于虎:微信小程序认知、安装与demo学习摘要

发布时间:2020-12-12  
一:认知

1. 技术架构

金于虎:微信小程序认知、安装与demo学习摘要

2.前端的视图 wxss

样式定义类似css的样式表,定义页面元素的样式

wxml

标签语言对html的扩展,定义我这里面会有那些组件,会有那些元素里面。更多的是做渲染

js 触发事件

定义触发后又后端的那些程序来处理

3.后端的server

很多接口以jsapi的方式提供

官网地址

地址1 工具

例子

二:组件和数据绑定

组件的基本使用

数据绑定

条件渲染

列表渲染 

三:下载安装

1.下载和安装开发程序

下载地址:开发者文档

扫描登陆

添加项目 (条件:微信号是需要是微信开发者)

无Appid(条件:需要Nodejs支持)

注意点:

在SDK中有些api是依赖nodejs的

部分功能受限 指的是无法再手机上看或者预览

2. 熟悉开发工具的使用 3. 熟悉目录架构

四:demo学习

1. 项目核心文件 app.js

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,

app.json

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

app.wxss

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

事件

全局函数

全局属性

2. 页面核心文件 页面目录和配置以及小程序首页

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

页面组成

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:

index.js

index.wxml

index.wxss

index.json

.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。 注意:目录名称和文件名称最好一样

index.js

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

index.wxss

index.wxss 是页面的样式表,

样式的覆盖,继承和和重写

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json

index.json 是页面的配置文件:

配置的覆盖,继承和重写

页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

demo片段

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(