从零开始学微信小程序开发:1
1.1、安装
1.2、创建项目
登录开发工具:
添加项目:有本地小程序项目和公众号网页开发
无AppID的开发者也可以使用开发工具
主要文件:如果创建时选中“quick start项目”,一共有2个目录和3个文件,最关键也是必不可少的,是app.js, app.json和app.wxss
.js是脚本文件,.json是配置文件,wxss是样式表文件。微信小程序会读取这些文件,并生成小程序实例。
1.3 认识开发工具
模拟器:
调试工具:
Console:显示错误信息,可用console.log('onLoad')调试
Sources面板:显示当前项目的脚本文件,与浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以Sources中的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在define函数中,并且对于Page代码,在尾部会有require的主动调用。
Network面板:用于观察和显示网络请求request和socket的情况。
AppData面板:用于显示当前项目中的具体数据,实时地反馈项目数据情况。变量
Storage面板:显示当前项目使用本地存储的情况
Wxml面板:帮助开发者查看Wxml转化后的界面。
代码编辑:
1.4 查看小程序效果
“清除数据缓存”,再重启
第二章 微信小程序架构分析
2.1 微信小程序框架结构
小程序只是前端程序(提供前端的逻辑层、视图层),通常还需要有数据层、业务逻辑层、服务层、控制层等这些通常说的后端程序
utils目录的util.js是一个共用js库,包含一个日期格式转换的函数。一般只保存一些静态图片,音视频放在后端
2.2 配置文件详解
app.json:对当前项目进行全局配置,包括每个页面文件的路径、窗口表现、设置网络超时时间、多tab等
要用到的页面都必须在app.json中进行配置,添加到pages数组中,文件名不需要写后缀,框架会自动寻找.json, .js, .wxml, wxss文件进行编译组合,第一项表示初始页面
配置窗口状态:
backgroundColor:窗口的背景色,使用十六进制的RGB
backgroundTextStyle:下拉背景字体、loading图的样式,目前只支持设置为"dark" or "light
enablePullDownRefresh:是否开启下拉刷新
navigationBarBackgroundColor:导航栏背景颜色
navigatonBarTextStyle:导航标题颜色,目前只支持black and white
navigationBarTitleText:导航栏标题文字内容
配置窗口底部tabBar:P42
在app.json中添加tabBar的5个属性
debug模式:
"debug": true
页面配置文件:不同页面有时需要不同配置,只能设置window属性,无须写window这个键
2.3 逻辑层js文件
对后端接收到的数据进行加工处理。官方在JavaScript的基础上进行了一些封装和修改:
- 提供了App和Page方法,用来进行程序和页面的注册
- 提供丰富的API,如扫一扫、支付
- 每个页面有独立的作用域,并提供模块化能力
- JavaScript在Web中的一些能力无法使用,如不能访问document和window等对象
- 所有代码最终被打包成一份JavaScript,并在小程序启动的时候运行,直到销毁。类似ServiceWorker
注册小程序:每个小程序必须在app.js中进行注册且只能注册一次,用App()函数,参数为json对象,可定义以下3个生命周期
- onLaunch:初始化完成时触发
- onShow:启动,或从后台进入前台
- onHide:从前台进入后台
进入后台一定时间,或手机资源占用过高,就会被销毁
注册页面:每个页面也必须使用Page()函数注册。使用到的数据在data属性中定义
初始化数据:位于data中,第一词渲染,data将会以JSON的形式有逻辑层传至视图层。视图层通过wxml对数据进行绑定。
生命周期函数: P48
- onLoad:页面加载完调用,只调用一次。参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
- onShow:页面显示时,每次打开页面都会调用一次
- onReady:初始渲染完成是,代表页面已经准备妥当,可以和视图层进行交互
- onHide:页面隐藏(当navigateTo或底部tab切换时)
- onUnload:页面卸载(当redirectTo或navigateBack的)
- onPullDownRefresh:下拉刷新时。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
事件处理函数:Page中可以定义一些特殊的函数。在视图层的组件中加入事件绑定。
使用setData修改初始化数据:
2.4 页面描述文件wxml
组件(Component)是视图的基本组成单元。
数据绑定:<text class="user-motto"> {{motto}} </text>用双括号
条件渲染:根据绑定表达式的逻辑值来判断是否渲染当前组件
<view class="content" hidden="{{flag ? true: false}}"> </view>
或者使用wx:if <view wx:if="{{cond}}"> T </view>
当需要控制多个组件时
<block wx:if="{{cond}}">
<view> 1 </view>
<view> 2 </view>
</block>
列表渲染:循环渲染的控制属性
使用wx:for
<view wx:for="{{items}}"> # items是一个数组
{{index}}: {{item.message}} # index是下标,item是数组当前项的具体内容
</view>
使用模板:组件的组合要多次使用
<temple name="userTemp">
<view class="user">
<view>name: {{item.name}} </view> # item是传入的对象
<view>name: {{item.name}}</view>
</view>
</template>
<template is="模板名称" data="{{传入的数据}}"/>
引用其他页眉文件:可以将一些模板代码定义在一个文件
<import src="template.wxml"/> 只是import模板,不会import引用文中的import
<include src="header.wxml"/> 相当于拷贝代码
2.5 页眉的事件
两大类型:
冒泡事件:触发后,向父节点传递
非冒泡事件:不向父节点传递
冒泡事件有:
- touchstart:手指触摸
- touchmove:手指触摸后移动
- touchcanncel:手指触摸动作被打断,如来电提醒,、弹窗
- touchend:动作结束
- tap:触摸后离开
- longtap:触摸后,超过350ms再离开
其它组件自定义事件都是非冒泡事件
事件绑定:定义属性,并设置值即可。属性是以bind或catch开头,再加上事件类型字符串。如bindtap
catch可以阻止冒泡事件向上冒泡
事件对象:一个名为event的参数。有6个属性:
type属性:用来表示当前事件的类型
timeStamp属性:页面打开到触发事件所经过的毫秒数
target属性:触发事件的源组件,是一个对象
currentTarget属性:当前组件
touches属性:一个数组,用来保存触摸点信息
detail属性:一个对象,用来保存特殊事件所携带的数据,如表单的提交事件、错误事件等
2.6 页面样式文件wxss
wxss具有CSS的大部分特性,如选择器支持id选择器、类选择器、伪类选择器等。同样,也支持class和style方式设置组件的样式。
尺寸单位:像素px、厘米cm、毫米mm、英寸in等。在小程序中另外又扩展了2种尺寸单位
rpx:可以根据屏幕宽度进行自适应
rem:规定屏幕宽度为20rem;1 rem = (750 / 20)rpx
样式导入: @import "common.wxss";
从零开始学微信小程序开发:1相关推荐
- 《从零开始学微信小程序开发》.pdf
关注"Java后端技术全栈" 回复"000"获取大量电子书 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关 ...
- 从零开始学微信小程序开发:6 旅行计划调查
小程序对HTML5表单及表单元素进行了封装,提供了丰富的表单组件. 6.1 用form组件收集信息 form(表单)也是前端视图层与后端服务层交互过程中最重要的信息来源. 小程序的form组件具有一些 ...
- 微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块 <!--pages/tabbar2/complexCalc/complexCalc.wxml--> <view class="container" ...
- 【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...
- 新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录 新手从零开始学习小程序开发01 前言 一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户 前言 本章主要介绍微信小程序开发 ...
- 【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接 微信小程序个人注册简单步骤 打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接 微 ...
- 我最近在学微信小程序开发,一起吗?
从当初的一夜成名,到今天火爆的市场占有率,微信小程序已走过 4 个年头.据今年 1 月阿拉丁发布的报告显示,微信小程序 2020 年 DAU 已破 4 亿,其总数超 380 万. 最近有读者问我说, ...
- 从零开始 | 原生微信小程序开发(二)
!打好最基础的部分,为后期的项目做好准备 ** 学习注册App函数和Page函数 ** 认识一些常见组件,其余组件使用时查找文档 ** 对于wxss和css,两种区分好 App函数.Page函数 1. ...
- 从零开始 | 原生微信小程序开发(一)
! 一步一步从最基础的开始搭建项目 ** 粗略地认识底层原理 ** 学会全局配置以及页面局部配置 ** 要学会独自查阅文档 下载步骤 注册 AppID 微信小程序 里面有开发文档,用来指引学习 完成账 ...
最新文章
- leetcode第一刷_Recover Binary Search Tree
- cocoapods使用教程
- Node.js REST 工具 Restify
- 高并发高负载的大型网站系统架构
- SAP Fiori Elements list report filter - implemented by framework
- RuoYi-Vue 部署 Linux环境 若依前后端分离项目(jar包+nginx 多机版本)
- Ubuntu 查看磁盘空间 及目录容量
- Vim常用按键操作学习
- 一个代码都不用敲的可视化大屏,一口气把工具和模板都送给你
- 已收藏!java面试知识点整理
- 印象笔记 离线版_印象笔记离线版
- 任正非《以客户为中心》
- LTE学习笔记五:LTE两种帧结构
- SpringSecurity(六)注销登录
- 大数据矩阵计算基础(二):R、Excel、Matlab中矩阵操作
- nodejs模块加载的猜想
- PostgreSQL学习篇9.3 浮点数类型
- 受到人工智能发展的影响的,主要包括哪些行业?
- zCloud使用技巧:如何使用性能下钻功能分析SQL性能问题
- (3) 二分频VHDL描述
热门文章
- 使用opencv创建一张纯黑色的图片与其他图片进行合成
- 高通开发系列 - Unpacking Tools拆包工具的制作
- java实现数字金额转换成汉字大写金额
- 辣椒的python之旅
- Foxmail 7.2数据迁移,导入旧数据
- 详解c语言main函数、printf函数、scanf函数与va家族
- 实现页面头的选择效果(自用)
- DirectX11进阶5_硬件实例化与视锥体裁剪及鼠标拾取交互
- 大一学生作品《前端框架开发技术》 期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例
- 物理隔离网闸——入门篇(2)