微信小程序
裴嘉靖
学而不思则罔 思而不学则殆
展开
-
微信小程序地图
地图组件:完成两大功能:A .显示地理位置;B .标记建筑物。1、完成最简单的地图显示:为通过CSS设置一个宽度和高度。2、如何显示指定位置的地图:为组件设置下列属性:longitude,设置显示位置的中心经度。latitude,设置显示位置的中心纬度。腾讯微信总部:longitude=113.324520 latitude=23.099994石家庄世纪公园:longitud...原创 2020-03-30 16:09:07 · 545 阅读 · 0 评论 -
微信小程序下表单验证的插件:WxValidate.js
(1)将WxValidate.js文件复制到utils文件夹中。(2)将WxValidate.js作为模块载入到需要用到的页面js文件中:A .CommonJS规范:暴露:module.exports 引入:require()B .ES6规范暴露:export default 引入:import fromC .引入代码:import WxValidate...原创 2020-03-30 16:07:32 · 1654 阅读 · 0 评论 -
小程序自制第三方组件(全局返回)
wxml<movable-area style="width:{{areaWidth}}px;height:{{areaHeight}}px"> <movable-view catchtap="backTo" direction="all"> <image src="../../images/common/fanhui.png"></image>...原创 2020-03-30 16:02:52 · 491 阅读 · 0 评论 -
数据驱动滑动门
<!-- 滑动门效果 --><view class="door"> <view class="title"> <block wx:for="{{doorTitle}}" wx:key="idx"> <view style="font-weight:{{currentIndex===index?'bold':'none'...原创 2020-03-19 15:07:49 · 126 阅读 · 0 评论 -
微信小程序(路由及组件跳页传参)
课程大纲(1)API路由跳页传参(2)navigator导航组件跳页传参API路由跳页传参商品列表展示页商品展示页编写回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页小程序事件传递参数小程序事件传递参数在小程序中,给元素绑定事件不能直接传递参数,如果写成正解:①给元素绑定自定义属性data-item=”{{item}}”②在js中通过事...原创 2019-11-29 10:58:24 · 342 阅读 · 0 评论 -
微信小程序(页面栈和API跳转)
课程大纲(1)数据操作限制补充(2)页面栈(3)API页面跳转—router路由APIwx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch数据操作限制针对上节所讲的程序注册器与页面注册器,简单做下补充,即页面数据data的操作限制(1)直接修改Page实例的this.data而不调用this.s...原创 2019-11-29 10:14:57 · 492 阅读 · 0 评论 -
微信小程序(页面用户行为)
课程大纲(1)页面构造/注册器Page()(2)页面注册器参数data初始化数据页面生命周期页面用户行为其他(3)页面用户行为前言注册页面:对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用:指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为:小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注...原创 2019-11-27 19:48:12 · 529 阅读 · 0 评论 -
微信小程序(页面生命周期)
课程大纲(1)页面构造/注册器Page()(2)页面注册器参数data初始化数据页面生命周期页面用户行为(3)页面生命周期及顺序小结:①小程序注册App()②页面注册Page()前言注册页面:对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用:指定页面的初始数据、生命周期回调、事件处理函数等。页面的生命周期:...原创 2019-11-27 19:30:43 · 1107 阅读 · 0 评论 -
微信小程序(逻辑层与程序注册构造器)
课程大纲(1)小程序逻辑层 App Service(APP服务)(2)ServiceWorker(3)web worker(4)程序构造/注册器App()前言逻辑层 App Service(APP服务)小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接...原创 2019-11-27 18:58:45 · 344 阅读 · 0 评论 -
微信小程序(跳页之tabBar导航跳转)
tabBar小程序导航简介:小程序是一个多tab标签应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过Tabbar配置项指定tab栏的表现,以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性:先来个简单案例看下效果 "tabBar": { "list": [ ...原创 2019-11-25 16:21:17 · 511 阅读 · 0 评论 -
微信小程序(小程序模型与宿主环境)
课程大纲(1)小程序模型(2)模型基本工作方式(3)数据驱动(4)通信模式(5)WebView(承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。)(6)JsCore(7)宿主环境前言小程序可以调用宿主环境/微信提供的微信客户端的能力,这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层, WXML 模板文件和 W...原创 2019-11-25 15:52:51 · 746 阅读 · 0 评论 -
微信小程序(JS逻辑文件)
课程大纲(1)业务逻辑案例(2)调用API案例(3)ECMAScript----(4)小程序执行环境(5)模块化(6)作用域与全局变量前言前言:一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,通过编写脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用:①开发者使用 JS来开发...原创 2019-11-22 18:51:32 · 2247 阅读 · 0 评论 -
微信小程序(布局适配与物理逻辑像素)
前言移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等,本节来详细介绍下关键词:屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。屏幕尺寸华为荣耀7上图写的是5英寸。那么这个5英寸到底是怎么算出来的呢?先进行一下单位的换算1英寸(inch)=2.54厘米(cm)屏...原创 2019-11-21 18:48:32 · 465 阅读 · 0 评论 -
微信小程序(WXSS样式文件)
课程大纲(1)WXSS简介(2)分类(3)尺寸单位rpx(4)样式导入@import(5)style内联样式(6)WXSS选择器(7)开发工具设置WXSS简介简介:WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。对比:WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS...原创 2019-11-21 17:09:05 · 1647 阅读 · 0 评论 -
微信小程序(WXML模板文件二)
课程大纲(1)循环指令key属性补充(2)wx:if条件变异指令(3)<block>标签(4)hidden隐藏元素(5)模板(6)引用(7)共同属性循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index(1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以(2)如果有删除或者插入的操作,后一位会继...原创 2019-11-21 16:54:05 · 130 阅读 · 0 评论 -
微信小程序的数据绑定和页面的跳转
数据绑定一、微信小程序的数据绑定方式:微信小程序提供了以下两种数据绑定方式:1、利用初始化数据进行数据绑定:将数据书写在Page({data:{}})中。绑定的数据可以在AppData面板中进行查看。2、使用setData()方法做数据绑定:这也被称为“数据更新”,这样的数据更新将引起页面 的再次渲染。(1)该方法的使用需要卸载 onLoad()函数中。(2)可以利用一个普通变量...原创 2019-11-13 16:20:46 · 891 阅读 · 0 评论 -
微信小程序基础组件
一、视图容器(View Container)1、<view></view>功能:基本视图容器,类似于页面开发时的<div></div>标记对。2、<swiper></swiper>功能:滑动视图容器,用于实现轮播图效果。结构:一个swiper组件由多个swiper-item组成。<swiper>...原创 2019-11-13 16:15:20 · 582 阅读 · 0 评论 -
微信小程序(WXML模板文件一)
今日大纲(1)页面根元素(2)WXML简介(3)标签闭合、敏感性(4)数据驱动(5)数据绑定{{}}—{{}}(6)列表渲染v-for----wx:for页面根元素根元素page每一个页面都具备一个根元素:<page></page>页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置简介全称:W...原创 2019-11-13 16:03:24 · 1088 阅读 · 0 评论 -
微信小程序(JSON配置文件)
认识微信小程序的目录结构一、根目录下的三个文件:1、app.js,必须,小程序逻辑文件。2、app.json,必须,小程序配置文件。3、app.wxss,全局公共样式文件。4、[pages],用于存放页面文件的文件夹。5、[utils],用于存放公共js的文件夹。二、微信小程序的页面:1、微信小程序是由若干个页面构成的。2、所有的页面内容必须存放在[pages]文件夹下。3、...原创 2019-11-13 15:24:47 · 1371 阅读 · 3 评论 -
微信小程序(开发工具、项目创建、发布审核、人员及目录结构分析)
课程大纲(1)账号申请(2)后台小程序信息完善(3)安装开发工具IDE(4)小程序项目搭建(5)项目编译(6)真机预览调试开发前准备小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。小程序开发前准备:①申请账号②安装开发工具申请账号开发小程序之前需要先注册一个小程序账号,通过这个帐号你就可以管理你的小程序。账号申请:...原创 2019-11-12 19:06:00 · 463 阅读 · 0 评论