微信小程序学习笔记

微信小程序学习笔记（3）——代码结构

微信小程序包含以下四种类型的文件：.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件1JSON配置JSON是一种数据格式，在微信小程序中，JSON文件用于实现静态配置参数功能。1.1小程序配置文件app.jsonapp.json是当前小程序的全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等内容。
deniro·2022-02-08 13:46

微信小程序学习笔记

原文链接一、微信小程序pk网页1、微信小程序是不是网页？微信小程序使用的是wxml绘制页面结构，wxss绘制页面样式，js实现页面逻辑。好像和网页的html+css+js类似，其实他们之间还是有很多不同的：网页的运行环境是浏览器（webview）；小程序只是wxml+wxs运行在webview中，js是单独的一个线程网页的页面跳转、前进、后退都是在同一个浏览器（webview）中完成的；小程序的每
zhenxiang_xue·2022-02-08 13:23

微信小程序学习笔记-3.1 布局基础整理（陆续补充）

2018/5/30这个东西一时半会肯定整理不完的，先挂着。3开头的笔记打算全部写布局。1.wxss-webkit-Safari,Webkit内核的浏览器浏览布局必须加上的前缀。这里不需要。display:nonevisiblehidden不渲染和不显示（占位置）2.wxml控件1)https://blog.csdn.net/xiabing082/article/details/52658565这位
Tony 赵·2022-02-08 13:52

微信小程序学习笔记(navigator、rich-text)

navigator(导航组件)块级元素，默认会换行，可以直接设置宽度高度。属性：1、url：要跳转的页面路径，绝对路径相对路径都可以。2、target：跳转到哪个目标。默认是自己的小程序(self)，其他小程序页面(miniProgram)3、open-type：跳转方式。有以下属性①navigate默认值，保留当前页面，跳转到小程序内的某个页面，tabbar页面除外。②redirect关闭当前页
陈百川·2022-02-08 13:52

微信小程序学习笔记(6) -- 本地生活项目

文章目录本地生活项目项目效果图外观和标签栏的配置windowtabBar目标具体代码:公共样式设置tabBar的样式:首页布局知识点image目标代码小程序中发送HTTP请求首页数据加载及数据绑定页面间跳转列表页分类信息加载第一页的商铺信息的加载上拉加载更多onReachBottom下拉刷新详细页:源码地址:本地生活项目项目效果图外观和标签栏的配置window用于设置小程序的状态栏、导航条、标题、
怒放de生命2010·2022-02-08 13:51

微信小程序学习笔记-2.2 实现详情页的访问

2018/5/26继上2.2实现了swiper功能后，访问详细页肯定也是我们所需要的。本章将涉及页面间的数据传递和事件相应相关内容1.前期准备创建detial详情页并在app.json中注册1）扩增上一节的页面内容太少了不好显示testList:[{name:"测试1",element:"测试1的相关内容",isHighLighted:true,des:'这是用来显示的内容----测试1',id:
Tony 赵·2022-02-05 17:37

微信小程序学习笔记（详细汇总）

小程序学习笔记一、微信小程序简介二、微信小程序环境准备2.1申请帐号2.2安装开发工具2.3编译预览三、小程序代码构成四、JSON配置4.1[小程序配置app.json](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)4.2[工具配置project.config.json](https://develo
perfect-code-hzy·2022-02-05 17:52

微信小程序学习笔记

从点开到显示的过程点开微信小程序的一瞬间，微信客户端做了些什么点开微信小程序；初始化宿主环境，加载小程序代码包，如果本地有缓存就用缓存，如果没有缓存就执行网络下载；给APP实例派发onLaunch事件，App构造器参数所定义的onLaunch方法被调用进入微信小程序执行后续的页面逻辑生命周期的触发条件app的生命周期App的生命周期是由用户操作主动触发的，开发者不能在代码里主动调用。只能使用回调函
乌云老湿·2022-02-05 09:51

微信小程序学习笔记之页面配置与路由方式

最近在学习回顾小程序的开发，将一些学习结果做个笔记。参考微信小程序官方文档：developers.weixin.qq.com/miniprogram…一、小程序配置1、全局配置小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。//示例{"pages":["pages/index/index","pages/logs/i
·2021-09-24 15:31

微信小程序学习笔记

1.学习资料相关1.文档名称描述小程序开发指南通过9章全面介绍小程序环境搭建到使用发布微信开放文档小程序学习新东西最好的方式就是官方文档，建议快速浏览一遍，然后开发中要用到的再查。微信组件示例快速查看组件样式显示flex伸缩布局flex布局全面介绍Promise高级进阶：深度揭秘Promise注册微任务和执行过程自定义组件【官】自定义组件指南,【官】自定义组件官方文档2.学习视频推荐bilibil
Small_Cake·2021-06-19 06:34

微信小程序学习笔记 >flex布局2

flex属性加上之后padding依然会撑大盒子,使用box-sizing:border-box可以不改变原来盒子的大小Documentdiv{width:200px;height:200px;background-color:red;display:flex;padding:20px;box-sizing:border-box;}没有变大的盒子.png
想做一个画家·2021-05-12 19:30

微信小程序学习笔记

（一）阮一峰教程之一：初次上手helloworld示例app.jsapp.jsonpages/home子目录app.js-对整个小程序进行初始化app.js内容只有一行代码。App({});app.json配置文件，记录项目的一些静态配置。app.json采用JSON格式。JSON是基于JavaScript语言的一种数据交换格式，只有五条语法规则，非常简单，不熟悉JSON的同学可以参考这篇教程。a
LuckyStar04·2021-03-07 22:52

微信小程序学习笔记二：自定义组件和自定义分享功能

5.自定义Component使用Componet类编写一个Componet配置Componentjson中的component为true-表示开启了component模式在需要引入页面的json文件中的usingComponent中注册(路径注意要指到.js文件)在需要引入的页面中进行引入即可6.使用button实现分享功能实现思路：使用share-btn的外部容器实现一个自己想要的效果使用but
月半叫做胖·2020-09-17 01:56

微信小程序学习笔记（十五）switch开关选择器

wxmljsswitchChange:function(e){console.log(e.detail.value)}
huangyuxin_·2020-09-15 10:36

微信小程序学习笔记(一): 基础环境配置

0.VSCodetypescript环境搭建开发工具微信开发者工具(用于调试，也可以用默认编辑器编写原生小程序代码)下载地址nodejs和npm(微信小程序现在支持npm包了，而且编译的时候也要用)国内镜像地址npm换源$npminstall--registry=https://registry.npm.taobao.org需要安装的插件minappwechat-snippetwepysnippe
月半叫做胖·2020-09-14 14:03

微信小程序学习笔记1——开发环境搭建

参考内容：http://kf.qq.com/faq/140806zARbmm161103ri2y2Q.html开发参考：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112什么是小程序？它赋予微信一种扩展能力，通过微信提供的API，可以让开发者调用硬件，从而实现一些APP的功能。它目前可以通过扫描二维码、全名搜索的方式进行进入，也可以通过在微信群
谢厂节_编程圈·2020-09-14 13:19

微信小程序学习笔记(一)

1.新添加页面，找到app.json，在pages中加入写的路径会自动生成文件2.页面跳转方式，传参数：wx.navigateTo({url:'../home/home?title='+app.globalData.userInfo.nickName,})url:跳转路径+“？”传参数名字+所传递参数，动态传递参数可以参照以上写法获取页面参数：onLoad:function(options){th
weixin_30576827·2020-09-14 12:21

微信小程序学习笔记（十六）textarea

auto-height自动变高bindfocus光标聚焦事件bindblur光标失焦事件bindinput当键盘输入时，触发input事件
huangyuxin_·2020-08-26 23:18

微信小程序学习笔记——常见组件【swiper】

swiper滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。常用属性autoplay自动轮播interval修改轮播时间circular衔接轮播indicator-dots显示指示器分页器索引器indicator-color指示器的未选择时的颜色indicator-active-color指示器的选中时的颜色属性类型默认值必填说明最低版本indicator-dotsb
有蝉·2020-08-24 09:07

微信小程序学习笔记（2）----HelloWorld分析

写在前面在学习HelloWorld之前首先需要破解微信开发工具，前面一篇有相关破解教程：http://blog.csdn.net/whzhaochao/article/details/52691550IDE结构上图是微信开发工具自动生成的一个HelloWorld，微信小程序的开发、调试都在这个工具中完成，相比于eclipse、Idea之类的Idea，小程序显示功能比较少，没多少菜单。编辑编辑菜单中
赵侠客·2020-08-22 19:31

微信小程序学习笔记之页面布局

本次主要学习页面的一些基本布局本次页面布局分成三段，第一段，屏幕上的滑动页面（原谅我电脑上没有正常图片hiahiahia）.selection{border-bottom:2pxsolid#ddd;}需要注意的是，wx：for这个条件渲染，并不是必须使用的，因为教程里用了，所以我也使用了，我对条件渲染这个内容还不是特别精通。如有错误，还请指正。以上，滑动页面就做好了如果需要设置更多关于swiper
silverg·2020-08-21 16:13

微信小程序学习笔记四（常用的方法）

注意：微信小程序不存在跨域问题。在微信web开发者工具中，使用wx.request发出请求时，需要取消验证域名。wx.request(object)发起请求常用的参数：参数名类型说明urlString开发者服务器接口dataObject、String、Array请求的参数methodString（必须大写）OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
wss5·2020-08-20 13:38

微信小程序学习笔记——常见组件【view , text】

https://developers.weixin.qq.com/miniprogram/dev/component/常用布局组件view,text,rich-text,button,image,navigator,icon,radio,checkboxview代替原来的div便签属性类型默认值必填说明最低版本hover-classstringnone否指定按下去的样式类。当hover-class
有蝉·2020-08-20 13:31

微信小程序学习笔记三（常用的组件）

视图容器view属性名类型默认值说明hover-classStringnone指定按下去的样式类，为none时，没有点击态效果hover-stop-propagationBooleanfalse指定是否组织本节点的祖先节点出现点击态hover-start-timeNumber50按住多久后出现点击态，单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒可滚动视
wss5·2020-08-20 10:33

微信小程序学习笔记二（数据绑定）

小程序介绍利用XML+CSS+JS编写移动应用程序微信小程序的一大特性就是：动态绑定数据。数据绑定（基本语法）假设在pages内的index文件夹下：index.js中的代码Page({//有一个data属性data:{greeting:"HelloWorld",textColor:"blue",isShowError:false,isLoading:true,num1:100,num2:200,
wss5·2020-08-18 05:03

微信小程序学习笔记五（持续更新）---小程序上传文件

项目中需要用户上传图片，需要实现，上传按钮默认为一个，在上传一张图片之后，自动增加一个上传按钮，上传三张图片后按钮消失。实现思路：1、图片路径存储在一个数组中，增加和删除图片是对数组进行操作；2、仅一个按钮，添加计数器，num=1;当num==3时，设置按钮隐藏。直接上代码：.wxml文件：+添加图片.wxss代码：.uploader{position:relative;width:175rpx;
ankuaji8631·2020-08-15 18:51

微信小程序学习笔记四（持续更新）---征服scroll-view下拉刷新

贴图大概实现这种使用swiper做tab切换，数据页面下拉刷新的效果。官方提供的scroll-view作为容器，如果在scroll-view使用onPullDownRefresh实现下拉刷新，会存在页面刷新卡，并且刷新会出现在tab之上，用户体验极差。这里先来一波参考文档：scroll-view微信官方文档scroll-view下拉组件---来自其他大神自己封装的组件，强推！实现思路还是scrol
ankuaji8631·2020-08-15 18:51

微信小程序学习笔记---liunx 搭建phpstudy并配置ssl（腾讯云apache）

1.安装phpstudyPHPstudy官网地址有介绍http://lamp.phpstudy.netwget-chttp://lamp.phpstudy.net/phpstudy.bin#下载chmod+xphpstudy.bin#权限设置./phpstudy.bin#运行安装#安装时间看配置而定phpstudy(start|stop|restart)#phpstudy开启关闭重启phpstud
一个老年程序员·2020-08-14 03:53

微信小程序学习笔记---底栏特效

熟悉微信小程序的朋友可能了解在定义小程序的底栏，一般只能固定操作。在微信小程序的官方文档中，我们发现做一个底部固定的菜单是可以在app.json上配置上去进行配置的，这样的功能非常强大，但是那些菜单的样式留给我们自定义样式的却不多，比如一下的这种菜单的话。在用app.json配置就凉凉了像这种自定义的菜单呢，最好的还是做成模板了，接收数据，可复用也高了。首先呢，模板的作用和具体可以去看下官方文档。
一个老年程序员·2020-08-14 03:53

微信小程序学习笔记---小程序的拖拽、缩放和旋转手势

在开发中，有时会遇到像App中的手势那样的效果，下面就仿照App实现了一下。wxml部分：{{msg}}wxss部分：page{width:100%;height:100%;background:#ffffff;}.touch-container{width:100%;height:100%;padding-top:0.1px;}.msg{width:100%;height:60rpx;line-
一个老年程序员·2020-08-14 02:18

微信小程序学习笔记——第一弹：小程序代码结构

近来被微信小游戏强势刷了一波后，萌生了学习微信小程序/小游戏的冲动~作为一个马上就要毕业的学生狗(｡☉౪⊙｡)，学习一下新技术，顺道还能丰富自己的简历，简直不能再美滋滋了~~~学习笔记会持续更新至完成第一个小程序实例，如果以下对小程序的理解有错误的地方，请这位有缘的看官好心修正，小生感激不尽(≖‿≖)✧~以下内容是参考、归纳微信小程序开发文档而来~//=======================
Mentina·2020-08-11 05:13

微信小程序01获取昵称和头像

微信小程序学习笔记2020/01/03一.页面创建1.全局三个文件分别是app.js，app.wxss，app.json（名称不可更改）2.创建Pages目录页面（作用是用来放各个页面的）3.创建页面（
xmtpinnnk·2020-08-10 08:05

微信小程序学习笔记——用promise封装原生的请求

在request文件夹里的index.js写方法exportconstrequest=(params)=>{returnnewPromise((resolve,reject)=>{wx.request({...params,success:(result)=>{resolve(result)},fail:(err)=>{reject(err)}})})}模块中使用import{request}fr
有蝉·2020-08-09 23:31

微信小程序学习笔记——常见组件【image】

image基础库1.0.0开始支持，低版本需做兼容处理。图片。支持JPG、PNG、SVG、WEBP、GIF等格式，2.3.0起支持云文件ID。1.图片有默认大小，默认宽高为3202402.mode决定图片内容如何和图片标签宽高做适配①scaleToFill默认值不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素②aspectFit保持宽高比确保图片的长边显示出来场景：页面轮播使用③as
有蝉·2020-08-09 23:59

微信小程序学习笔记1 ——关于微信小程序云开发登录注册功能

本科课程作业写了个基础的小程序在这里记录分享一下，如有错误欢迎指出。注册功能的实现注册功能，本质上是向数据库里添加一条用户的信息，我的思路是首先判断该用户有没有注册过账号，若有则跳转登录，若无则直接注册。根据云开发自带的login云函数获取到用户的openid，然后根据此openid在用户集合中查询，为空跳转注册，不为空则跳转提示“已经注册请直接登录”js代码现在登录的js文件开头申明：const
jiaoooooo·2020-08-09 08:58

微信小程序学习笔记（六）

onLaunch(options)：调用时机：小程序被加载完毕的时候调用。这个方法一般用来做一些初始化的事情。比如获取用户信息、获取历史缓存信息、获取小程序打开来源等。参数：|参数|类型|说明||:—|:—|:—||path|String|打开小程序的路径||query|Object|打开小程序的query||scene|Number|打开小程序的场景值||shareTicket|String|s
润森·2020-08-07 21:33

微信小程序学习笔记——模板语法

1.数据绑定https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html在vscode中安装了小程序插件代码示例2.运算（表达式）3.列表渲染①列表循环{{item.name}}{{index}}①对象循环属性：{{key}}值：{{value}}4.block【①占位符的标签】【②写代码的时候可以看到这便签存在
有蝉·2020-08-07 17:28

微信小程序学习笔记（三）

数据文件处理打包（脚本模拟数据库）脚本文件输出module.exports()脚本文件引入require()脚本文件使用template模板化关于import数据文件处理打包（脚本模拟数据库）脚本文件输出module.exports()把数据做成数组单独新建文件夹和新建js文件，把数组放到里面定义出口module.exports={}脚本文件引入require()require()只能使用相对路径
非黑非白-·2020-08-07 12:00

微信小程序学习笔记(一)

微信小程序的入门学习和基本使用前言：最近学习了微信小程序，归纳总结笔记，只是简单的去介绍使用流程，可以作为快速上手的基本过程，学习过程遇到的问题会单独拎出来单独归纳，这篇文章只是代表总结的一个梳理过程。一、简介与发展历史简介：小程序是一种全新的连接用户与服务器的方式，他可以在微信内被便捷的获取和传播，同时具有出色的使用体验。也是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户
I'm getting stronger·2020-08-07 10:28

微信小程序学习笔记

1.问题：做项目的时候，点击input标签很难获取到焦点进行输入解决办法：鼠标长按即可2.问题：wx.navigateTo页面不跳转原因：我想要跳转到的目标页面含有tabBar底部菜单栏解决办法：将wx.navigateTo换成wx.switchTab3.问题：怎样限制显示文字的长度，超出长度显示省略号解决办法：CSS设置text-indent:2em;/*首行缩进*/overflow:hidde
扎哈的信徒·2020-08-05 20:42

微信小程序学习笔记-2.1 wx.for 和 wx.if 的使用

2018/6/30wx:for和wx:if可以很方便的创建wxml元素本例将用swiper内对象的创建来展示其效果1.前期准备首先创建目录和工程文件mainmain.js中，创建静态listdata:{testList:[{name:"测试1",element:"测试1的相关内容",isHighLighted:true,id:1},{name:"测试2",element:"测试2的相关内容",is
Tony 赵·2020-08-04 21:09

微信小程序学习笔记三（持续更新）---小程序组件通信

参照这里这里将重要的点贴一下：一、项目目录结构在项目同级目录新建components文件夹，新建component会生成wxml,wxss,js,json文件。将所有的公共组件都写在此文件夹下。二、组件引入和使用我们的所有页面一般写在pages目录下，每个页面有wxml,wxss,js,json四个文件，在需要使用组件的页面.json文件中，引入{"usingComponents":{"compo
super琪·2020-08-04 17:11

微信小程序学习笔记四（持续更新）---征服scroll-view下拉刷新

贴图大概实现这种使用swiper做tab切换，数据页面下拉刷新的效果。官方提供的scroll-view作为容器，如果在scroll-view使用onPullDownRefresh实现下拉刷新，会存在页面刷新卡，并且刷新会出现在tab之上，用户体验极差。这里先来一波参考文档：scroll-view微信官方文档scroll-view下拉组件—来自其他大神自己封装的组件，强推！实现思路还是scroll-
super琪·2020-08-04 17:11

微信小程序学习笔记五（持续更新）---上传文件

项目中需要用户上传图片，需要实现，上传按钮默认为一个，在上传一张图片之后，自动增加一个上传按钮，上传三张图片后按钮消失。实现思路：1、图片路径存储在一个数组中，增加和删除图片是对数组进行操作；2、仅一个按钮，添加计数器，num=1;当num==3时，设置按钮隐藏。直接上代码：.wxml文件：+添加图片.wxss代码：.uploader{position:relative;width:175rpx;
super琪·2020-08-04 11:23

微信小程序学习笔记(4) -- 页面间的跳转和传值

文章目录页面间跳转页面间跳转---导航页面间传值页面导航模式--redirect改进：使用redirect方式跳转导航元素点击高亮如果设置不高亮？如何自定义高亮效果普通元素如何设置高亮页面导航apiwx.navigateTo携带参数wx.redirectTowx.navigateBack页面间跳转页面间跳转—导航关键标签:navigator首先注意2个地方:1.在app.json中书写一个配置项，
怒放de生命2010·2020-08-02 12:27

微信小程序学习笔记

视图层WXML数据绑定Mustache语法（双大括号）中变量不存在时不会报错~Mustache语法（双大括号）中字符串运算用+Mustache语法（双大括号）中变量不用加引号，加了会当成字符串Mustache语法（双大括号）中对象写法：object.key或者object[‘key’]会解析成false，不要直接写checked=“false”，其计算结果是一个字符串，转成boolean类型后代表
Karagrade·2020-08-01 11:35

微信小程序学习笔记一（基础知识 ）

由于最近学习了有关微信小程序的相关知识，故在这里总结一下学习心得。微信小程序开发基础1.登录微信公众平台https://mp.weixin.qq.com/注册小程序账号。2.下载并安装微信web开发者工具Json配置文件配置文件分为两类。app.json为全局配置。作用域：作用于全部页面pages目录下的每个页面下也有一个.json文件，作用域：只作用于当前页面。下面来介绍一下app.json的相
wss5·2020-08-01 05:14

微信小程序学习笔记(二):wxml遍历显示json数据

data=[{'place':'北京','id':0},{'place':'陕西','id':1},{'place':'上海','id':2},{'place':'湖北','id':3},{'place':'江苏','id':4},{'place':'辽宁','id':5},{'place':'山东','id':6},{'place':'四川','id':7},{'place':'广东','id'
菜鸟上路_lbz·2020-07-31 23:27

微信小程序学习笔记——样式 WXSS 【尺寸单位，样式导入，使用less或sass】

目录1.尺寸单位2.样式导入3.选择器4.小程序中使用less（sass也是一样的）1.尺寸单位rpx(responsivepixel):可以根据屏幕宽度进行自适应，规定屏幕宽韦750rpx。如在iphone6上，屏幕宽度为375px,共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。需求如下/*pages/stylePage/stylePage.
有蝉·2020-07-31 22:59

微信小程序学习笔记1

微信小程序：QuickStart一、.json后缀的JSON配置文件.json分小程序配置app.json、工具配置project.config.json和页面配置page。json下面分别说一下：1、app.jsonapp.json是对当前小程序的全局配置，包括了小程序的页面路径（pages）、界面表现window、网络超时时间networkTimeout、底部tab等pages接受一个数组，每
～轻舟～·2020-07-31 22:09
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他