微信小程序系列
关注
分享
扫一扫
文章平均质量分 88
微信小程序常用技术分享
前方一片光明
作者是10年Java开发，技术交流、项目合作可私聊。公众号：程序员高手之路
展开
-
微信小程序系列——如何获取input和textarea的内容
前言input内容可以直接获取到，而textarea内容需要间接通过blur获取：wxml表单：<form bindsubmit="formSubmit" > <view class="add-text"> <textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入texte...原创 2020-05-28 08:55:23 · 13247 阅读 · 2 评论 -
微信小程序系列——跳转页面以及跳转小程序
一、跳转页面wx.switchTab({ url: '../../pages/soup/soup'})二、跳转小程序app.js"navigateToMiniProgramAppIdList": [ ""//填入小程序id],wxml：<navigator target="miniProgram" open-type="navigate" a...原创 2020-04-05 17:26:04 · 6977 阅读 · 6 评论 -
微信小程序系列——你知道什么是事件传播以及怎么防止吗？
如图，蓝色区域是红色区域的子元素；我们希望点击子元素的时候，避免触发父元素的点击事件这时候，可以使用catchTap来绑定点击事件：<view class='father' catchtap='ontapFather'> <view class='child' catchtap='ontapChild'></view></view&...原创 2020-04-12 10:45:50 · 6866 阅读 · 1 评论 -
微信小程序系列——无缝引入CSS或者WXML文件
引入CSS样式文件的格式：@import '../../style/common.wxss';引入WXML文件的格式：<include src="******.wxml"/>第三方组件库推荐：WeUI、iView Weapp、Vant Weapp原创 2020-04-05 17:26:19 · 7880 阅读 · 0 评论 -
微信小程序系列——循环数组在前后端的使用
wxml:使用wx:for之后，需要加入wx:key='{{index}}'来指定下标如：<view wx:for='{{list}}' wx:key='{{index}}'>姓名：{{item.name}}，年龄：{{item.age}}</view>js:pageData.forEach(function(item, index){ ...原创 2020-04-05 17:25:29 · 7738 阅读 · 0 评论 -
微信小程序系列——正确使用tabBar
1. list中，第一条是主页，不然显示不了tabBar;2. list中至少有2条，最多有5条；3. 默认颜色用“color”，被选中的颜色用“selectedColor”"tabBar": { "selectedColor": "#42B983", "list": [{ "pagePath": "pages/search/search", ...原创 2020-04-12 10:45:24 · 8132 阅读 · 0 评论 -
微信小程序系列——自定义标题
前言3步自定义标题栏step1app.json中修改windows： "window": { "navigationStyle": "custom" },step2app.js中设置状态栏高度this.globalData = { statusBarHeight: wx.getSystemInfoSync()['statusBarHeigh...原创 2019-11-30 16:04:13 · 5918 阅读 · 4 评论 -
微信小程序系列——开发知识点集锦
一、tabBar1.1list中，第一条是主页，不然显示不了tabBar;1.2 list中至少有2条，最多有5条；1.3 默认颜色用“color”，被选中的颜色用“selectedColor”"tabBar": { "selectedColor": "#42B983", "list": [{ "pagePath": "pages/search/se...原创 2019-07-17 20:42:52 · 6245 阅读 · 5 评论 -
微信小程序系列——引入第三方组件库vant
前言在引入之前，需要安装nodejs作为运行环境，具体操作网上可以搜得到！以引入vant为例：step1右键miniprogram，选择“在终端打开选项”step2初始化npm输入npm init，下面的选择都用回车即可在项目中产生package.json文件即为成功step3安装vant使用命令 npm i vant-weapp -S --pro...原创 2019-07-17 20:41:04 · 11283 阅读 · 2 评论 -
微信小程序系列——上传下载图片以及图片的展示
一、上传wxml：<button bindtap='upload'>上传文件</button>js：首先在data里添加全局变量imagesdata: { images: []},upload: function(){ wx.chooseImage({ count: 1,//数量为1个 sizeType: ['origina...原创 2019-07-16 22:02:24 · 11011 阅读 · 2 评论 -
微信小程序系列——对数据的增删改查操作
前言微信云数据库使用的是非关系型数据库，类似于Elasticsearch、MongoDB等，与传统的Oracle、MySQL等关系型数据库不同。建议开发小程序之前先了解一下非关系型数据库基础知识。一、添加文档wxml:绑定insert事件<button bindtap='insert'>插入数据</button>js:insert事件里调用......原创 2019-07-06 09:06:20 · 20905 阅读 · 6 评论 -
微信小程序系列——点击图片放大预览
需求开发的时候，把图片放到页面上，点击图片没有任何反应，不能放大也不能缩小这怎么能行！！！所以需求来了：点击图片能够把图片弹出来，这样就能放大图片看细节了！实现步骤微信提供了预览图片的接口，其中urls是必填的，类型step1wxml文件里添加点击事件<image class='img' src='{{imgUrl}}' bindtap='clickImg...原创 2019-07-03 20:44:16 · 33015 阅读 · 21 评论