微信小程序
微信小程序笔记
笑到世界都狼狈
我来到这个世上,就没打算活着回去
展开
-
async小程序中支持es7的async语法
es7的async号称是解决问题的最终方案1.在小程序开发工具中,勾选es6转es5语法2.下载facbook的regenerator库中的https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js3.在小程序目录下新建文件夹lib/runtime/runtime.js,将代码拷贝进去4.在每一个需要使用async语法的页面js中,都引入(不能全局引入)im翻译 2021-02-28 15:13:40 · 338 阅读 · 0 评论 -
微信小程序,滚动条回到顶部,点击按钮的时候,让滚动条回到顶部scroll-top
首先官方文档中有介绍scroll-view的相关属性:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部,但是实际操作中,我们往往需要在某些特定操作后让滚动条回到顶部下面以点击按钮,让滚顶条回到顶部为例,写一个简单的实现代码:scroll.wxml:<view class="homes">原创 2021-01-05 10:07:00 · 4369 阅读 · 0 评论 -
微信小程序的缓存功能(如果页面请求数据过多,如果小程序中存在缓存,且不过期,那么下次在加载页面的时候可以不发送请求)
Page({ /** * 页面的初始数据 */ data: { // 轮播图数组 swiperList:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /** * --------如果请求的数据比较多,很占资源,可以利用小程序的缓存--------------------- * 1.判断本地存储中有没有旧数据(有没有过期,time:Date.no.翻译 2021-01-03 21:51:17 · 2424 阅读 · 2 评论 -
微信小程序scroll-view标签
页面效果如下图所示:wxml:<view class="homes"> <!-- 调用搜索框组件 --> <searchInput></searchInput> <!-- 小程序滚动容器 --> <view class="home_container"> <!-- 左侧菜单 --> <scroll-view scroll-y class=.原创 2021-01-03 18:25:19 · 417 阅读 · 0 评论 -
微信小程序轮播图2(es6的promise对小程序request的优化)
1.关于微信小程序轮播图调用接口请求的结果写法:index.wxml:<!-- 轮播图 开始 --> <view class="index_swiper"> <!-- 1.<swiper></swiper>标签存在默认样式 1.width:100% 2.height:150px; 2.<image></image>标签存在默翻译 2021-01-03 16:07:36 · 278 阅读 · 1 评论 -
微信小程序接口调用request请求
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 发送异步请求获取轮播图数据 wx.request({ url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata', success: (result) => { console.log(result); } }) },...翻译 2021-01-03 15:40:54 · 639 阅读 · 1 评论 -
微信小程序组件components的使用及新建
1.新建组件文件夹,将后面项目中用到的组件都放进组件文件夹中;2.我在这边需要一个搜索的组件,所以新建一个searchInput的文件夹;3.在searchInput的文件夹上,右键选择新建Component就会看到文件夹下面生成四个文件4.在searchInput.wxml中编写搜索框代码,这边点击搜索框的时候,页面跳转到搜索页面,在searchInput.wxss中写css代码样式具体步骤如下图所示:5.在需要用到的页面json文件中,导入组件路径具体步骤如下图所示:翻译 2021-01-03 13:41:02 · 1992 阅读 · 1 评论 -
微信小程序 window配置
1.参照官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html2.主要用到以下几点:3.配置示例:{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroun原创 2021-01-02 19:00:40 · 643 阅读 · 0 评论 -
微信小程序的一些页面初始化样式
app.wxss@import "./styles/iconfont.wxss";/* 在微信小程序中,不支持通配符 即'*' *{ padding:0; margin:0; box-sizing:border-box; }*//* 用比较笨的方法,将需要初始化的标签加进来 */page,view,text,swiper,swiper-item,image,navigator{ padding:0; margin:0; box-sizi...翻译 2021-01-02 18:49:12 · 1173 阅读 · 0 评论 -
微信小程序tabBar的使用
1.如下图所示,要先准备好图片以及新建好页面2.在app.json中添加代码{ "pages":[ "pages/index/index", "pages/category/index", "pages/cart/index", "pages/user/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff",原创 2021-01-02 18:26:02 · 1725 阅读 · 2 评论 -
小程序导入阿里巴巴矢量图标库图片
1.打开阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库2.将自己项目中需要的图片加入购物车3.点击添加至项目4.新建项目5.生成在线链接6.生成代码7.小程序中新建wxss,将代码粘贴进去8.全局样式中导入9.页面中使用...原创 2021-01-02 17:40:04 · 598 阅读 · 0 评论 -
微信小程序button开发能力
wxml:<!-- button 开发能力open-type:1 contact 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息, 需要在微信小程序得后台配置 只能通过真机调试来打开 2 share 触发用户转发(转发当前小程序,到微信朋友中 不能把小程序分享到朋友圈)3 getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明 1 绑定一个事件bi翻译 2020-11-16 19:53:50 · 417 阅读 · 0 评论 -
微信小程序button的外观属性
<!-- button 标签1 外观的属性 1 size 控制按钮的大小 1 default 默认大小 2 mini 小尺寸 2 type 用来控制按钮的颜色 1 default 灰色 2 primary 绿色 3 warn 红色 3 plain 按钮是否镂空,背景镂空 4 loading 加载中 --><button>默认按钮</button><button size="mini">mini.翻译 2020-11-16 17:22:27 · 3552 阅读 · 0 评论 -
微信小程序富文本标签rich-text的使用
wxml:<!-- rich-text 富文本标签1 nodes属性来实现 1 接收标签字符串 2 接收对象数组 --> 接收对象数组<rich-text nodes="{{html}}"></rich-text>js:Page({ data:{ // 1 接收标签字符串 // html:'<div style="border: 0px solid black; position: relative; box-s翻译 2020-11-16 17:12:47 · 6167 阅读 · 0 评论 -
关于微信小程序的navigator标签
关于微信小程序的navigator标签总结的一些笔记<!-- 关于小程序的navigator标签------相当于html中的a标签 导航组件 navigator 1.块级元素 默认会换行 可以直接加宽度和高度 2.url 要跳转的页面路劲 绝对路径 相对路径 3.target 要跳转到当前的小程序 还是其他的小程序页面 self 默认值 跳转到自己的小程序页面 miniProgram 跳转到其他的小程序页面.翻译 2020-09-20 20:04:25 · 8267 阅读 · 2 评论 -
微信小程序轮播图1
<!-- 轮播图 --><swiper circular indicator-dots indicator-color="#cccccc" indicator-active-color="#ff0000" autoplay="true" interval="5000" duration="500"> <block wx:for="{{swiperImg}}" wx:key="index"> <swiper-item> <ima.翻译 2020-09-09 20:29:01 · 203 阅读 · 0 评论 -
微信小程序笔记
五月份的时候买了一本小程序的书翻完了,但是中途工作比较忙,看过的东西也没咋实践,忘得差不多了,最近有空又抽时间在B站了找了一些小程序相关视频学习学习,下面总结一下学习笔记:为了方便,我的笔记直接写在代码注释里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2020-09-07 19:49:10 · 445 阅读 · 1 评论 -
根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引
微信小程序页面加载的时候页面一直有一行警告,看着蛮难受的解决方法,找到project.config.json文件,将"checkSiteMap": true,中的true改成false就好了,可参考下图:参考链接: https://blog.csdn.net/weixin_43368623/article/details/102837905...翻译 2020-06-04 13:59:02 · 719 阅读 · 0 评论 -
微信小程序有用到wx:for={{}}遍历数组的,控制台就会有一堆警告
所以最后的效果就是在所有有写到wx:for的地方都要加一个wx:key="index",具体如下所示:<block wx:for="{{swiperImg}}" wx:key="index"></block>参考:https://www.cnblogs.com/kpengfang/p/12049007.html翻译 2020-06-04 11:48:56 · 769 阅读 · 0 评论 -
微信小程序加载图片报错
刚开始学习小程序,对很多东西还不是很熟悉,页面写了个图片,加载不出来,一直报错:VM436:1 Failed to load local image resource /pages/images/1.jpg the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)找了一下解决的办法,差不多都是说加个wx:if就好了<image wx:if='{{news.poster}}' src="{{原创 2020-06-04 11:26:04 · 2483 阅读 · 2 评论 -
创建第一个微信小程序
1.双击打开微信开发者工具,效果如下,需要用微信扫一扫进入:2. 进入工具后点击"+"新建3.在开发文档中找APPID4.将AppID复制到对应位置5.点击新建,第一个小程序就新建成功了原创 2020-05-21 17:22:51 · 243 阅读 · 0 评论 -
微信小程序开发工具的下载
1.还是在微信公众平台下载https://mp.weixin.qq.com/2.点击小程序3.点击开发者工具 4.点击下载,选中适合自己的,下载安装即可原创 2020-05-21 16:12:02 · 792 阅读 · 0 评论 -
注册微信开发者账号
最近自学了一下微信小程序,开发者首先要在微信公众平台上注册一个小程序账号,这样才能进行后续的代码开发与提交作业。其注册步骤如下:1.访问微信公众平台官网首页(mp.weixin.qq.com)2.点击立即注册3.点击小程序4.输入账号信息5.提交后会看到邮箱激活提醒,但是我已经注册过了,没法截图,所以跟着提示走就好了6.激活后会有相应的信息登记,类型一般选“个人”,其他的有身份证号,身份证上姓名之类的,如实填写就好了,登记完了之后必须用自己的微信扫码进行身份验证...原创 2020-05-21 15:47:22 · 4350 阅读 · 0 评论