![](https://img-blog.csdnimg.cn/20191228165805164.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
微信小程序
yingjieweb
踏踏实实学点前端
展开
-
小程序项目开发配置
目录1、项目初始化及目录和页面划分2、网络请求的封装 Promise3、轮播图效果展示及封装swiper1、项目初始化及目录和页面划分1.1、新建项目:使用微信开发者工具创建项目,并将其链接到远程 gitHub 仓库。具体步骤可以参考这里:传送门1.2、划分项目目录:一般情况下需要新建几个文件夹:assets、components、pages、service、utils。...原创 2020-02-09 10:54:46 · 223 阅读 · 0 评论 -
小程序开发介绍
目录1、什么是微信小程序2、小程序带来的好处3、小程序开发的必要性4、小程序的几个特点5、小程序与普通网页开发的区别6、开发前的准备工作微信小程序于2016年9月21日发布的内测版,2017年1月9日正式上线,虽然发布比较晚,但是发展势头相当快,现在几乎成为前端开发人员的必备技能之一了。而且任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和...原创 2019-12-31 19:25:01 · 987 阅读 · 2 评论 -
第一个小程序应用
目录1、应用目录结构2、项目使用 git 管理3、几个基础知识点4、小程序 MVVM 架构1、应用目录结构一个微信小程序 App 里面可能有多个界面,每一个界面包含四个文件(.js、.json、.wxml、.wxss),一般每一个界面所包含的文件存放到一个文件夹,然后将所有界面的文件夹存放到 pages 根文件夹下。全局 app.json 文件是进行一些全局配置,文件中的...原创 2020-01-02 17:02:05 · 233 阅读 · 2 评论 -
小程序的相关配置
目录1、project 和 sitemap 配置2、全局配置 app3、局部配置 page小程序的很多开发需求被规定在了配置文件中,这样做可以更有利于提高的开发效率,并且可以保证开发出来的小程序的某些风格是比较一致的,比如导航栏、顶部TabBar,以及页面路由等等。小程序中有很多配置,其大致可以分为三类:(1)project 和 sitemap 配置(2)全局配置 app(3)...原创 2020-01-02 17:55:00 · 364 阅读 · 0 评论 -
小程序的双线程模型
目录1、小程序宿主环境2、渲染层和逻辑层3、界面渲染过程4、界面渲染整体流程1、小程序宿主环境微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。微信客户端是小程序的宿主环境,宿主环境为了执行小程序的各种文件(wxml文件、wxss文件、js 文件)提供了小程序的双线程模型:渲染层和逻辑层。小程序的渲染层和逻辑层分别...原创 2020-01-02 20:09:38 · 737 阅读 · 1 评论 -
小程序 Page 生命周期
目录1、小程序的启动流程2、注册APP时做什么3、注册Page时做什么4、Page生命周期图解1、小程序的启动流程通过了解小程序的启动流程,可以了解小程序的代码执行顺序。每个小程序都需要在 app.js中调用 App()方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,而且整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 get...原创 2020-01-03 10:04:26 · 543 阅读 · 0 评论 -
小程序的常见内置组件
目录1、Text 组件2、Button 组件3、View 组件4、Image 组件5、Input组件6、scroll-view 组件7、组件的共同属性小程序中有很多组件,例如表单组件、媒体组件、导航组件等,组件及详细属性可以参考官方文档,下面介绍几种常用的组件。1、Text 组件Text 组件用于显示文本,类似于 html 中的 span 标签,是行内元素...原创 2020-01-03 18:05:10 · 1349 阅读 · 0 评论 -
WXSS 相关知识点补充
目录1、样式的三种写法2、小程序支持的选择器3、wxss的扩展-尺寸单位4、wxss的扩展-样式导入5、官方样式库1、样式的三种写法页面样式的三种写法:(1)行内样式、(2)页面样式 page.wxss、(3)全局样式 app.wxss。都可以作用于页面的组件<!--1.行内(内联)样式--><view style='color:red; fo...原创 2020-01-04 16:35:52 · 1458 阅读 · 0 评论 -
WXML 相关知识点补充
目录1、WXML 的基本格式2、Mustache {{ }}语法3、逻辑判断一wx:if-wx:elif-wx:else4、逻辑判断二 hidden 属性5、列表渲染 - wx:for &&block标签5、模板用法1、WXML 的基本格式WXML 类似于 HTML 代码,它的基本格式有:(1)可以写成单标签,也可以写成双标签、(2)必须有严格的...原创 2020-01-06 16:24:12 · 1058 阅读 · 0 评论 -
WXS 相关知识点补充
目录1、认识 WXS 的作用2、WXS 的基本使用3、WXS 的应用练习1、认识 WXS 的作用WXS(WeiXin Script)是小程序的一套脚本语言,结合WXML,可以构建出页面的结构。官方解释:WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致(不过基本一致)。为什么要设计 WXS 语言:在 WXML 中是不能直接调用 ...原创 2020-01-09 19:42:44 · 254 阅读 · 0 评论 -
小程序的事件介绍
目录1、事件处理简述2、常见的事件类型3、事件对象的解析4、事件的参数传递5、事件冒泡和捕获1、事件处理简述小程序需要经常和用户进行某种交互,比如点击界面上的某个按钮或区域、或页面滑动,这些交互都会产生各种各样的事件;事件是通过 bind/catch属性绑定在组件上的,和普通的属性写法相似,比如:<button bindtap='tapName'>按...原创 2020-01-09 20:30:39 · 549 阅读 · 0 评论 -
小程序的组件化开发
目录1、组件化是啥2、自定义组件的过程3、自定义组件注意事项4、自定义组件的 Component 构造器1、组件化是啥如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。虽然小程序在刚推出时是不支持...原创 2020-01-14 16:22:58 · 527 阅读 · 0 评论 -
小程序组件和页面的通信 ★
目录1、向组件传递数据 — properties2、向组件传递样式— externalClasses3、组件向外传递事件 — 自定义事件4、页面直接调用组件修改数据/方法 —this.selectComponent5、组件的插槽 — slot6、自定义组件练习— tab-control很多情况下,组件内展示的内容(数据、样式、标签)并不是在组件内写死的,而且由使用...原创 2020-01-15 11:59:19 · 787 阅读 · 0 评论 -
小程序的网络请求 wx.request
目录1、网络请求基本使用2、通讯域名配置流程3、网络请求的封装 Promise4、进一步的封装思想1、网络请求基本使用微信小程序提供了专属的 API 接口,用于发送网络请求:wx.request(Object object),详情参考官方文档。网络请求一般在页面的生命周期函数中执行,一旦页面加载完成(onLoad() 生命钩子),即发送网络请求。这里需要注意的是,发送网络...原创 2020-01-17 16:13:39 · 2424 阅读 · 0 评论 -
小程序展示弹窗和页面分享
目录1、小程序展示弹窗2、小程序页面分享1、小程序展示弹窗使用小程序的过程中经常会弹出一个弹窗,给用户传递提示信息。小程序中展示弹窗有四种方式:showToast () 、showModal () 、showLoading () 、showActionSheet () ,这些方法都是系统的 API,在用到时只需要调用对应的方法即可。1.1 wx.showToast(Object...原创 2020-02-03 12:05:29 · 2515 阅读 · 0 评论 -
小程序登录流程解析
目录1、小程序的登录流程2、小程序登录代码解析1、小程序的登录流程小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。官方文档小程序的登录流程解析:(1)调用 wx.login() 获取临时登录凭证 code。(2)通过 wx.request() 发送 code 到开发者服务器,开发者服务器会将 code 和 小程序的 app...原创 2020-02-03 15:55:02 · 503 阅读 · 0 评论 -
小程序的页面跳转
目录1、navigator 组件的使用2、跳转过程数据传递3、通过代码页面跳转页面跳转有两种方式:通过 navigator 组件和通过 wx 的 API 跳转。1、navigator 组件的使用navigator 组件主要就是用于界面的跳转的:官方文档属性 类型 默认值 必填 说明 target string self 否...原创 2020-02-08 11:14:56 · 330 阅读 · 0 评论