微信小程序
关注
分享
扫一扫
文章平均质量分 65
uni-app开发的微信小程序
有蝉
文章有用的话，请点个赞啊
展开
-
微信小程序学习笔记——微信小程序介绍
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被快捷地获取和传播，同时具有出色的使用体验。是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用为啥学习微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；推广app或公众号的成本太高开发适配成本低容易小规模试错，然后快速迭代跨平台还有其他的小程序 不容忽视...原创 2020-04-08 18:46:49 · 413 阅读 · 0 评论 -
微信小程序学习笔记——环境准备 【注册账号】【获取APPID】
1.注册账号①一个和微信没有产生联系的又想②邮箱激活③信息登记2.获取APPIDAPPID：相当于开发者唯一的身份验证，发布应用时需要它，支付功能也会用到它https://mp.weixin.qq.com/3.开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/do...原创 2020-04-08 19:04:40 · 671 阅读 · 0 评论 -
微信小程序学习笔记——第一个微信小程序
打开微信开发者工具扫码登录之后，创建项目项目创建好之后原创 2020-04-09 09:31:44 · 172 阅读 · 0 评论 -
微信小程序学习笔记——微信开发者工具介绍【菜单】
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html下面的菜单自己点点就知道是干啥的了点击“详情”可以修改APPID以及项目名称调试基础库为chromium版本号...原创 2020-04-09 14:42:45 · 1018 阅读 · 0 评论 -
微信小程序学习笔记——小程序结构目录
https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.htmlMINA框架为微信小程序的原生框架小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据和逻辑小程序文件结构和传统web对比结构 传统we...原创 2020-04-09 15:18:08 · 415 阅读 · 0 评论 -
微信小程序学习笔记——小程序配置文件 app.json
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html全局配置配件app.json小技巧 ：配置文件在微信开发者工具编写，页面逻辑在vscode中编写页面结构：pages用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻...原创 2020-04-09 18:00:13 · 597 阅读 · 0 评论 -
微信小程序学习笔记——小程序配置文件 页面配置 page.json
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html页面配置每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。文件内容为一个 JSON 对象。页面配置文件：如下图...原创 2020-04-09 18:16:24 · 1170 阅读 · 0 评论 -
微信小程序学习笔记——小程序配置文件 sitmap配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.htmlsitemap 配置小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有sitemap.json，则默认为所有页面都允许被索引...原创 2020-04-09 18:18:53 · 291 阅读 · 0 评论 -
微信小程序学习笔记——模板语法
1. 数据绑定https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html在vscode中安装了小程序插件代码示例2.运算（表达式）3.列表渲染① 列表循环<view wx:for="{{list}}" wx:for-item="item" ...原创 2020-04-10 15:01:32 · 433 阅读 · 0 评论 -
微信小程序学习笔记——条件渲染【wx:if 和hidden】
<view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view>----------------------</view><view wx:if="{{false}}">1</view><view wx:e...原创 2020-04-10 15:37:21 · 381 阅读 · 0 评论 -
微信小程序学习笔记——事件绑定
从视图到模型把输入框的值 赋值到data当中wxml<!--pages/eventPage/eventPage.wxml--><!-- 1. 需要给input标签绑定 input事件 绑定关键字 bindinput 2. 如何获取 输入框的值 通过事件源来获取 e.detail.value 3. 把输入框的值 赋值到...原创 2020-04-13 09:11:03 · 591 阅读 · 0 评论 -
微信小程序学习笔记——样式 WXSS 【尺寸单位，样式导入，使用less或sass】
1.尺寸单位2.样式导入3.选择器4.小程序中使用less1.尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应，规定屏幕宽韦750rpx。如在iphone6上，屏幕宽度为375px,共有750个物理像素，则750rpx = 375px = 750物理像素， 1rpx = 0.5px =1物理像素。需求如下/* pages...原创 2020-04-13 10:47:42 · 2058 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【view , text】
https://developers.weixin.qq.com/miniprogram/dev/component/常用布局组件view , text , rich-text , button , image , navigator , icon , radio , checkboxview代替原来的div便签属性 类型 默认值 必填 说明 ...原创 2020-04-13 15:08:00 · 684 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【image】
image基础库 1.0.0 开始支持，低版本需做兼容处理。图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0起支持云文件ID。1.图片有默认大小， 默认宽高为 320 2402.mode决定图片内容如何和图片标签宽高做适配 ① scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 ②...原创 2020-04-13 15:45:56 · 2410 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【swiper】
swiper滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。常用属性autoplay 自动轮播interval 修改轮播时间circular 衔接轮播indicator-dots 显示 指示器 分页器 索引器indicator-color 指示器的未选择时的颜色indicator-active-color 指示器的选中时的颜色属性...原创 2020-04-15 10:00:06 · 4896 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【navigator】导航组件
导航组件navigator0.块级元素默认会换行可以直接加宽度和高度1.url要跳转的页面路径绝对路径相对路径2.target要跳转到当前的小程序还是其他的小程序的页面self默认值，自己小程序的页面miniProgram其他小程序的页面3.open-type跳转方式...原创 2020-04-15 12:13:59 · 4262 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【rich-text】导航组件
rich-texthttps://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html可以将字符串解析成对应标签，类似vue中v-html功能<!--pages/richPage/richPage.wxml--><!-- rich-text 富文本标签 1 nodes属性来实现...原创 2020-04-15 14:52:58 · 722 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【button——外观样式】
https://developers.weixin.qq.com/miniprogram/dev/component/button.htmlbutton下面的配置删除掉基础库 1.0.0 开始支持，低版本需做兼容处理。按钮。属性 类型 默认值 必填 说明 最低版本 size string default 否 按...原创 2020-04-15 15:35:22 · 1308 阅读 · 1 评论 -
微信小程序学习笔记——常见组件【button——开放能力】
<!--pages/buttonPage/buttonPage.wxml--><!-- button 标签 1 open-type 1 contact 直接打开客服对话功能 | 需要在微信小程序的后台配置 2 share 转发当前的小程序 到微信朋友中 | 不能把小程序分享到朋友圈中 3 getPhoneNumber 获取当前用户的手机号码信...原创 2020-04-16 08:35:53 · 654 阅读 · 0 评论 -
微信小程序学习笔记——自定义组件 属性和组件的生命周期
组件中的属性组件生命周期组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是createdattacheddetached，包含一个组件实例生命流程的最主要时间点。组件实例刚刚被创建好时，created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的...原创 2020-04-21 11:46:30 · 1005 阅读 · 0 评论 -
微信小程序学习笔记——小程序生命周期
应用生命周期指app.js属性 类型 默认值 必填 说明 onLaunch function 否 监听小程序初始化 onShow function 否 监听小程序启动或切前台 onHide function 否 监听小程序切后台 onError function...原创 2020-04-22 16:03:53 · 270 阅读 · 0 评论 -
微信小程序学习笔记——小程序第三方框架
1. 腾讯 wepy 类似vue2. 美团 mpvue 类似vue3. 京东 taro 类似react4. 滴滴 chameleon5. uni-app 类似vue原创 2020-04-22 16:42:07 · 281 阅读 · 0 评论 -
微信小程序学习笔记——目录结构以及请求后台时的设置
目录名 结构 styles 存放公用样式 components 存放组件 lib 存放第三方库 utils 自己的帮助库 request 自己的接口帮助库 如何发送请求给后台step1：用wx.request发送请求//Page ObjectPage({ data: { /...原创 2020-04-24 15:17:20 · 493 阅读 · 0 评论 -
微信小程序学习笔记——自定义组件步骤
类似vue或者react中的自定义组件步骤：Step1：新增组件① 根目录下新建 components 文件夹② 在components 文件夹中，新建自定义组件文件夹③ 右击 Tabs 文件夹 ，然后点击 弹出的菜单中的 “新建Compent”，输入组件名称，自动生成4个文件Step2 ：声明组件Step3：使用组件...原创 2020-04-17 09:18:08 · 914 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【checkbox】
checkbox多选项目。属性 类型 默认值 必填 说明 value string 否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带checkbox的 value disabled boolean false 否 是否禁用 ...原创 2020-04-17 08:32:43 · 2003 阅读 · 0 评论 -
微信小程序学习笔记——常见组件【radio】
radio单选项目需要搭配radio-group 一起使用属性 类型 默认值 必填 说明 value string 否 radio标识。当该radio选中时，radio-group的 change 事件会携带radio的value checked boolean false 否...原创 2020-04-16 17:38:01 · 1052 阅读 · 0 评论 -
微信小程序学习笔记——用promise封装原生的请求
在request文件夹里的index.js写方法export const request=(params)=>{ return new Promise((resolve,reject)=>{ wx.request({ ...params, success:(result)=>{ ...原创 2020-04-24 16:35:07 · 1070 阅读 · 0 评论 -
uni-app开发的h5，使用微信授权登录（前置条件+具体代码）
微信内嵌浏览器运行H5版时,可以调起微信登录 普通浏览器调起微信登陆是不开放的，只有个别开发者才有，比如京东前置条件在微信内嵌浏览器运行H5版时,调起微信登录，需要配置回调域名，具体步骤如下①打开微信公众平台，登录上去②点击【公众号设置】③点击【功能设置】④找到【网页授权域名】，点击旁边的【设置】⑤ 在修改业务域名和JS接口域名时，已经上传过这个文件的话，那么请直接跳过这一步。如果还没上传的，直接点击文件下载，然后上传到服务器。 （这个可以找后台人员去干）...原创 2020-10-23 10:39:02 · 32683 阅读 · 37 评论 -
微信小程序很少接触到的命令
原创 2022-03-13 15:01:32 · 122 阅读 · 0 评论 -
微信小程序码的生成方式
原创 2020-11-09 14:41:52 · 859 阅读 · 0 评论 -
微信小程序发送订阅信息（uni-app）
getSubscribe(type) { var tmplIds = ['3xLMrIa0X5yPiLaFkpa1rlLcXUkwrXqi9qPsvLUKKq4'] uni.requestSubscribeMessage({ tmplIds: tmplIds, success: (res) => { for (let key in res) { if (res[key] == "accept") { uni...原创 2020-11-09 15:51:41 · 1961 阅读 · 0 评论 -
微信小程序支付（uni-app）
//openId传给后台接口，获取微信支付所需参数 getPayParams() { let openId = uni.getStorageSync('openid') this.$http({ url: '/api/order/createPayData', method: 'POST', data: { orderId: this.orderId, "client": "WX_MINI",...原创 2020-11-09 16:23:43 · 3532 阅读 · 3 评论 -
微信小程序获取用户tel、获取用户信息（uni-app）
两者不能同时获取获取手机号需要后台接口配合<button @getuserinfo="wxGetUserInfo" open-type="getUserInfo">获取用户信息</button><button @getphonenumber="wxGetPhoneNumber" open-type="getPhoneNumber">获取用户手机号</button><script> wxGetUserInfo() { ..原创 2020-12-02 14:43:53 · 634 阅读 · 0 评论 -
关于移动端使用position:fixed/absolute出现随屏幕滚动情况
https://blog.youkuaiyun.com/xiasohuai/article/details/88090462如下图，按钮使用了position:absolute绝对定位，但是在苹果手机上会随页面滚动，解决方法如下在position:fixed/absolute内加入-webkit-transform: translateZ(0);假如有遮罩情况则在内容区域，加入：margin-bottom:30px;//margin-top:30px;抖动情况，则在内容区域，加入 ：...转载 2020-12-10 14:55:47 · 5927 阅读 · 0 评论 -
微信小程序，点击tab，使当前tab出现的视野中 或者 滑动下面的swiper，使当前的tab出现在视野中（用的uni-app）（滑动的tab）
主要是 scroll-view 这个组件的使用，以及每一个tabItem一些属性的计算<template> <view id="estimate-answerV2" class="estimate-answerV2"> <view class="tab-nav"> <scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-left="sc.原创 2020-12-22 15:23:58 · 806 阅读 · 0 评论 -
微信小程序获取用户地理位置（uni-app）
step1: 原生的微信小程序需要在app.json中配置permission字段。uni-app则需要在manifest.json中配置，如下图step2：查看授权以及申请授权获取地理位置 getUserLocation() { uni.getSetting({ success: (res) => { if (!res.authSetting['scope.userLocation']) { console.log(res)原创 2020-12-23 10:10:54 · 3967 阅读 · 2 评论