微信小程序实战开发【爱创课堂】

微信小程序开发实战教程
一、微信小程序
它是一种混合开发的方式。

是安装在微信中的程序(一个程序最多2M空间)。

1.1 注册

2 点击立即注册:进入下方页面

3

4 点击小程序进入表单填写页面

5

6 填写完毕之后提交,会让你去邮箱中激活。激活之后就可以进入小程序开发了。

1.2 安装开发工具
经过1.1注册之后,我们有了开发账号,但是没有办法凭空开发内容,我们需要下载开发工具。使用微信提供的开发工具进行开发。

下载地址:

1 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

进入之后,会看到让你选择版本的信息。

选择对应的版本进行安装。 例如:我的电脑就是windows64位操作系统,那么我就选Windows 64位

点击之后就会开始下载

下载完毕之后,得到一个安装包

双击进行安装,下一步下一步直到结束。

安装完毕之后,会自动打开登录界面。有一个二维码,通过微信扫描该二维码登录。

登录之后

1.3 创建小程序项目
点击上图中的小程序项目

项目目录:就是项目所在目录

AppId: 小程序的id。你通过注册之后会得到一个id。输入它即可。

我们现在没有注册完毕,只能点击测试小程序进行测试

项目名称: 你当前创建的项目的名称 这是唯一的。

填写完毕之后:

建立普通快速启动模板: 如果勾选 则会在项目目录下 自动创建一个demo案例

点击确定之后,编辑器会启动

预览窗口: 你编写的小程序的预览窗口,可以进行点击 其实就是一个手机模拟器

功能窗口: 许多功能按钮

目录结构: 项目的目录状态

代码编辑窗口:代码可以在这里编辑

调试窗口: 代码书写过程中,调试时,会在这里输出一些信息。也有控制台的功能也有文档结构的功能。

1.4 目录结构介绍
1.4.1 pages
这个文件夹,是用来放所有的小程序需要的页面。

该文件夹中是一个一个的子文件夹,每一个子文件夹表示一个页面。

默认创建出来的pages中有两个:1 index 就代表index页面 2 logs 就代表logs页面

1.4.2 utils
这个文件夹,是用来放所有的工具的。可以删除。

1.4.3 app.js
这个文件,叫做应用程序构造器。

整个应用程序的配置,都可以在这里面书写,主要是应用程序的声明周期函数以及全局数据。

全局的脚本文件

App({

/** onLaunch

  • 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

    */

    /** onShow

  • 当小程序启动,或从后台进入前台显示,会触发 onShow

    */

    /**onHide

  • 当小程序从前台进入后台,会触发 onHide

    */

    /** onError

  • 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

    */

})

1.4.4 app.json
这个文件,是小程序的配置文件。

配置的是小程序的内容。

这是一个JSON文件 需要使用符合规范的JSON语法。

key必须要使用双引号

不能有注释

对象的最后一个属性值之后不能有逗号

pages: 配置当前小程序在运行过程中所需要的页面

它的值是一个数组,每一个成员是一个页面文件的路径 本质上是在说明index.wxml 但是可以省略后缀

它有一个特点:如果在添加完某一项并保存之后,该文件和文件夹还没有存在,则会自动创建出来

window: 配置小程序的界面的

"window"

"backgroundTextStyle": 背景文字颜色

"navigationBarBackgroundColor": 导航部分的背景颜色

"navigationBarTitleText":  导航标题文本

"navigationBarTextStyle":  导航文本颜色

"tabBar": 底部按钮

"list": 每一个按钮都配置在这里面 它是一个数组

数组的成员是对象

    "pagePath": 点击该按钮的时候跳转到哪个页面 该属性的值必须是pages数组中的某一项

    "text":  文本

    "iconPath": 图标路径,

    "selectedIconPath": 选中时候的图标路径

1.4.5 app.wxss
其实就是css文件。它里面配置的内容是全局样式。类似于我们的reset.css

这是一个全局样式文件。会自动应用在所有页面中。

1.4.6 project.config.json
这是针对项目的配置。

1.5 局部文件
pages是一个文件夹,该文件夹内是子文件夹,每一个子文件夹代表一个页面。

子文件夹内:

1.5.1 局部脚本
.js文件: 局部脚本文件 该文件只对当前页面生效

Page({

/**data

  • 页面的初始数据

    */

    /** onLoad

  • 生命周期函数--监听页面加载

    */

    /**onReady

  • 生命周期函数--监听页面初次渲染完成

    */

    /**onShow

  • 生命周期函数--监听页面显示

    */

    /**onHide

  • 生命周期函数--监听页面隐藏

    */

    /**onUnload

  • 生命周期函数--监听页面卸载

    */

    /**onPullDownRefresh

  • 页面相关事件处理函数--监听用户下拉动作

    */

    /**onReachBottom

  • 页面上拉触底事件的处理函数

    */

    /**onShareAppMessage

  • 用户点击右上角分享

    */

})

1.5.2 局部样式
位于页面内的wxss文件,是针对当前页面的局部样式。与全局app.wxss一起负责当前页面的样式。如果有冲突,优先使用当前页面的wxss样式。

1.5.3 页面骨架
页面内有一个wxml文件,用于搭建当前页面的骨架。

html文件内的标签,我们叫做元素。

wxml文件内的标签,我们叫做组件。因为对html元素进行了封装。所以叫做组件。

二、混合开发
从一开始的浏览器只是一个内容发布器开始,到后来的WebApp。

本质上都是在网页端做事情。

Hybird就是混合开发。它的意思是: 一处开发,多端使用。

微信小程序就是属于混合开发。

混合开发有三种形式:

1 hybird 浏览器渲染

2 reactnative 原生API

3微信小程序

三、属性
对于一个html来说,内容是由标签构成的。对于JS来说,我们称标签为 “元素”。

对于一个wxml来说,内容是由标签构成的。对于JS来说,我们成标签为“组件”。

其实,wxml就是对html的标签进行了封装。封装之后,就不是元素了,而是组件。也不可以使用jQuery等内容。

3.1 通用属性
对于html的标签来说

标准属性分为两部分

一部分是所有的标签都有的属性(通用属性)

另一部分是某一些标签特有的属性(特有属性)

对于wxml的标签来说

标准属性分为两部分

一部分是所有标签都有的属性(通用属性)

另一部分是某一些标签特有的属性(特有属性)

wxml中的通用属性:

id 组件的id

class 用于通过类的形式设置样式

style 行内样式

hidden 用于隐藏组件

data-* 自定义属性

bind | catch 事件属性

非通用属性:

image组件的src属性等

四、数据相关
页面所需的数据定义在对应的js文件的对象中。 属性名叫做data。

微信小程序是属于数据驱动。

页面初始化时所需要的数据都必须先定义。

数据渲染的过程就是将对应的数据插入到页面中的过程。(插值的过程)

插值语法: {{}}

注:它里面并没有提供一个真正的js环境,只是一个伪环境。 只能够执行简单的运算 而不能够调用方法。

之前遇见过的插值语法:

underscore: <%=%>

MVC中: <%%>

ejs中: <%%>

ES6中: ${}

less中: @{}

sass中: #{}

4.1 插值
插值模板:

1 <view>{{num * 2}}</view>

2 <view>{{title.toUpperCase()}}</view>

插值数据的定义:

1 data: {

2 num: 123,

3 title: "aichuangketang"

4 }

渲染之后:

4.2 修改数据
要使用页面去修改数据:

this.setData(option);

option 是一个对象

key: 要修改的属性层级字符串 可以是单层级 可以是多层级

value: 要修改的对应key的值

demo:

更改数据之前:

更改代码:

1 onLoad: function (options) {

2 var me = this;

3 console.log("index页面页面加载")

4 setTimeout(function() {

5 me.setData({

6 title: "爱创课堂",

7 "obj.name": "王老四"

8 })

9 console.log(me)

10 }, 3000)

11 },

代码执行之后:

4.3 数据丢失
更改数据,一定要通过setData方法来修改。因为它是微信提供的方法。

如果使用点语法或者方括号语法直接修改属性的值。则无法渲染到页面上。这就叫做数据丢失。

注:尽量只更改关键的信息。

demo:

更改数据之前:

更改代码:

1 setTimeout(function() {

2 me.data.title = "爱创课堂";

3 console.log(me.data)

4 }, 3000)

数据状态:

页面状态:

数据已经被修改,但是页面没有发生变化。

五、事件
根据事件的特性,有两类

所有组件都拥有的事件 通用事件

touchstart 触摸开始

touchend 触摸结束

touchmove 触摸移动

touchcancel 触摸取消

tap 轻按

longtap 长按

longpress 长按

transitionend 过渡完成

animationstart 动画开始

animationend 动画结束

animationinteration 动画执行一次就触发一次

还有一类是某些(个)特定组件的特有事件

例如表单的提交事件

根据事件的绑定方式,也可以分成两类

一类是冒泡事件

bind[eventName]

另一类是不冒泡事件

catch[eventName]

5.1 绑定冒泡事件
组件结构:

1 <!--pages/event/event.wxml-->

2 <view bindtap=‘parent‘>

3 <view bindtap=‘show‘>我是一个组件</view>

4 </view>

对应的js代码:

1 // pages/event/event.js

2 Page({

3

4 /**

5 * 页面的初始数据

6 */

7 data: {

8

9 },

10 // 定义show事件

11 show: function() {

12 console.log("点击我了");

13 },

14 // 定义parent事件

15 parent: function() {

16 console.log("点击到爸爸了")

17 }

18 })

点击之后:两个事件都会输出

5.2 绑定不冒泡事件
组件结构:

1 <!--pages/event/event.wxml-->

2 <view bindtap=‘parent‘>

3 <view catchtap=‘show‘>我是一个组件</view>

4 </view>

代码

1 // pages/event/event.js

2 Page({

3

4 /**

5 * 页面的初始数据

6 */

7 data: {

8

9 },

10 // 定义show事件

11 show: function() {

12 console.log("点击我了");

13 },

14 // 定义parent事件

15 parent: function() {

16 console.log("点击到爸爸了")

17 }

18 })

点击之后:只有子元素的事件触发 父元素的事件没有触发

5.3 事件对象
查看事件对象:

changedTouches: 改变的手指的列表

currentTarget: 绑定事件的组件

id: 当前组件的id

offsetLeft: 该组件的距离父组件的left值

offsetTop: 该组件的距离父组件的top值

dataset: 该组件的自定义数据

detail: 手指位置

target: 触发事件的组件

timeStamp:页面加载到事件触发的时间间隔

touches: 手指列表

type: 事件类型

。。。。。未完待续。。。。。

头像处获取更多前端资料

原文地址:https://blog.51cto.com/14337100/2421064

时间: 2024-10-08 14:25:40

微信小程序实战开发【爱创课堂】的相关文章

Web前端_微信小程序实战开发

微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1  2 点击立即注册:进入下方页面 3  4 点击小程序进入表单填写页面 5  6 填写完毕之后提交,会让你去邮箱中激活.激活之后就可以进入小程序开发了. 1.2 安装开发工具 经过1.1注册之后,我们有了开发账号,但是没有办法凭空开发内容,我们需要下载开发工具.使用微信提供的开发工具进行开发. 下载地址: 1 https://developers.weixin.qq

微信小程序实战教程

微信小程序实战教程(第1篇) 课程观看地址:http://www.xuetuwuyou.com/course/154 课程出自学途无忧网:http://www.xuetuwuyou.com 课时1:1.开篇 课时2:2.文档概览  课时3:3.认识小程序  课时4:4.小程序设计指南 课时5:5.响应的数据绑定  课时6:6.微信小程序游戏的演示  课时7:7.基础组件 课时8:8.view 课时9:9.文件结构  课时10:10.配置  课时11:11.逻辑层  课时12:12.注册小程序 

微信公众号开发三级分销微商城,微信小程序定制开发

10年的技术开发团队,提供网站建设,APP开发,网站推广等服务,专业微信小程序定制开发,需要这方面的朋友,可以咨询一下. 案例演示: 成功案例: 联系方式:8582-36016 ,微信号:luenmicro ,电话:131-1221-5717

【小程序源码案例】微信小程序项目开发案例分享

作者:web小二本文标签: 微信小程序 小程序源码案例 小程序项目小程序的开发,并不是适合所有公司,我今天跟大家分享小程序方面的教程,主要是供大家学习使用.学习这种东西,有时候则是单纯的喜欢,没有任何目的,很单纯的为了好玩,记得很早之前学flash,没有想法,就是觉得好玩,纯娱乐爱好而已.到后来玩视频剪辑也是出于同样的原因,不图钱财名利,只是图自己个人爱好娱乐. 但是,学习,有时候则是需要有明确目的,特别是关系到自己吃饭问题的时候,你就需要非常有目的去学习,并且还需要制定好学习的计划与目标,希望

Mac上微信小程序官方开发工具卡死的问题

Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除"微信web开发者工具" 2.删除一下几个配置和缓存文件: 1.-/Library/Application Support/微信web开发者工具 2.~/Library/Preferences/com.tencent.wechat.devtools.plist 3.~/Library/Caches/微信web开发者工具 3.重新安装"微信web开发者工具"

微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

微信小程序实战之天气预报

原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:https://github.com/shuncaigao/Weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字

微信小程序实战之百思不得姐精简版

原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star. 地址: https://github.com/shuncaigao/BS 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳

微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助

微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序资源大多是整理自github,如果可以,希望大家能够给github上的原作者一颗star,感谢原作者的无私奉献. 这里整理的是资源的原帖子,下载链接也在帖子里,当然本人也只体验了部分demo,有兴趣的同学可以都下载试试. 下载地址: 仿微信聊天,朋友圈小程序源码wepy框架开发的小程序商城源码,功能