微信小程序
微信小程序学习
stay hungry,stay you
stay hungry,stay young
展开
-
29:二维码的生成
test.wxml:<view><image size ="mini" src="{{imgUrl}}"/></view>test.js:会生成百度的二位码//生成二维码const QR = require('../../utils/weapp-qrcode.js'); Page({ /** * 页面的初始数据 */ data: { imgUrl:"" }, onLoad: function (e) { **//原创 2021-08-22 13:26:37 · 180 阅读 · 0 评论 -
报错或提示总结
1:根据sitema的规则[0],当前页面[pages/index/main]将被索引。src同级目录找到project.config.json文件(添加以下设置):"setting": { "checkSiteMap": false},原创 2021-08-22 12:42:06 · 91 阅读 · 0 评论 -
28:全局变量的使用
1:关于全局变量的定义:例如在app.js文件中的globalData中进行定义,如isLogin2:关于全局变量的调用:在js文件中调用: this.globalData.isLogin在非js文件中调用:声明变量获取全局的变量var app = getApp();3:关于全局变量的值修改:不用this.setData,直接app.globalData.isLogin = true但是普通的一个js页面data中的数据则不行,必须setData...原创 2021-08-22 08:49:01 · 370 阅读 · 0 评论 -
小知识点汇总
1:带有下滑杠的代表私有方法_handleChooseAlbumVideo:function(){}2:this.setdata() 只有这样复制才能进行数据渲染this.data.list = list1 这种是不会渲染数据的,切记数据操作原创 2021-08-19 15:06:51 · 119 阅读 · 0 评论 -
27:push和concat区别以及...list 的使用
concat和push区别:1:push 遇到数组参数时,把整个数组参数作为一个元素;而 concat 则是拆开数组参数,一个元素一个元素地加进去。2:push 直接改变当前数组;concat 不改变当前数组。如果非要用push的话可以这样:var listnew = [1,2,3,4];var list=[],list.push(...listnew);输出:list [1,2,3,4]...原创 2021-08-19 14:42:06 · 421 阅读 · 0 评论 -
26:new Promise()的使用和export 导出import导入方法
new Promise()area.js:export default function(options){ return new Promise((resolve,reject)=>{ wx.request({ url: options.url, method:options.method || 'get', data:options.data || {}, success:resolve,原创 2021-08-19 14:22:43 · 597 阅读 · 0 评论 -
25:module.exports exports 和 require import
当module.exports 指向新的对象时,exports 断开了与 module.exports 的引用,module.exports 指向了新的内存块,而 exports 还是指向原来的内存块。因此,在不是很清楚两者关系的时候,请采用module.exports来暴露接口,而尽量不采用exports暴露接口。具体参考:module.exports和exports的区别...原创 2021-08-18 15:17:37 · 257 阅读 · 0 评论 -
24:全国省市县下拉列表
modelTest.wxml:<!--modelTest.wxml--><import src="../../model/model.wxml"/><view class="infoText">{{province}} {{city}} {{county}}</view><button class="animation-button" bindtap="translate">选择城市</button><template原创 2021-08-18 11:08:03 · 693 阅读 · 0 评论 -
23:小程序更新机制
未启动时更新: 开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新到新版本。总的来说,开发者在后台发布新版本之后,无法立刻影响到所有现网用户,但最差情况下,也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。启动时更新: 小程序每次冷启动时,都会检查是否有更新版本,如果原创 2021-08-16 15:07:03 · 195 阅读 · 0 评论 -
22:初始渲染缓存
初始渲染缓存工作原理:小程序页面的初始化分为两个部分。逻辑层初始化:载入必需的小程序代码、初始化页面 this 对象(也包括它涉及到的所有自定义组件的 this 对象)、将相关数据发送给视图层。视图层初始化:载入必需的小程序代码,然后等待逻辑层初始化完毕并接收逻辑层发送的数据,最后渲染页面。在启动页面时,尤其是小程序冷启动、进入第一个页面时,逻辑层初始化的时间较长。在页面初始化过程中,用户将看到小程序的标准载入画面(冷启动时)或可能看到轻微的白屏现象(页面跳转过程中)。启用初始渲染缓存,可以使视图原创 2021-08-16 14:52:49 · 462 阅读 · 0 评论 -
21:轮播图
components/m-swiper.wxml:<swiper class="swiper" autoplay indicator-dots indicator-active-color="#ff5777" circularinterval="3000"> <block wx:for="{{list}}" wx:key="index"> <swiper-item class="swiper-item"> <i原创 2021-08-16 09:56:01 · 76 阅读 · 0 评论 -
20:<navigator>携带数据跳转页面并且点击跳转页还能返回
test.wxml:这里注意navigator不需要写navigator.wxml 随后在 ?传参<!--利用 ? 传参数的方式把参数传过去--><navigator url="/pages/navigator/navigator?xuqinyunsb=1&height=18">点击跳到toast页面</navigator>创建pages/navigator/navigator.wxml<navigator open-type="navigate原创 2021-08-14 08:24:28 · 509 阅读 · 0 评论 -
19:做一个计算器的功能
wxml:type:primary(绿色)default(白色)warn(红色)<view class="sumflex"> <input type="number" bindblur="tapnum1" placeholder="输入数字" class="input-radius1" value="{{value1new}}"/> <button type="primary" bindtap="clearNumber1">清空第一个数字</but原创 2021-08-13 09:28:52 · 92 阅读 · 0 评论 -
18:slot多插槽
创建pages/component/getmanyslot/getmanyslotgetmanyslot.js:Component({//组件的方法列表 options:{ multipleSlots:true }})getmanyslot.json:{ "component":true, "usingComponents": {}}getmanyslot.wxml:<!--pages/component/getmanyslot/getmanyslot.w原创 2021-08-12 15:45:37 · 241 阅读 · 0 评论 -
17:slot单插槽
slot插槽就是把一个页面的内容插入到组件内容中去创建pages/component/getslot/getslotgetslot.json:{ "component":true, "usingComponents": {}}getslot.wxml:<!--pages/component/getslot/getslot.wxml--><view>我是组件的头部</view><slot/><view>我是组件的尾部<原创 2021-08-12 15:33:07 · 99 阅读 · 0 评论 -
16:selectComponent 修改组件内获取的对象或方法的内容
在component中创建pages/component/getobjfromcomponent/getobjfromcomponentgetobjfromcomponent.js:incrementfromcomponent这个名字随便定只要test.js中调用名一致就行Component({ data:{ counter:0 },//组件的方法列表 methods:{ incrementfromcomponent(num){ this.setData({原创 2021-08-12 15:20:23 · 1237 阅读 · 0 评论 -
15:自定义组件做一个功能
test.js: //流行 新款 精选 event中把这是三个的内容和下标传过来 handletapclick:function(event){ console.log("下标是:"+event.detail.indexn+"内容是:"+event.detail.titles); },test.json:"usingComponents": { "tab-control":"/pages/component/tabcontrol/tabcontrol" },test.原创 2021-08-12 11:21:09 · 95 阅读 · 0 评论 -
14:自定义组件
新建component包然后创建myeventmyevent.js:自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名(随意取名)、detail对象和事件选项//事件变化从组件内向页面传递Component({ methods:{ handleforpage(){ //{}可以写一些东西向test.js中handleforpage中的event传递数据 this.triggerEvent("increment",{nh:"why",ages原创 2021-08-12 10:47:53 · 180 阅读 · 0 评论 -
13:数据遍历和flex布局使用
js:Page({ /** * 页面的初始数据 */ data: { movies:["火影","海贼"] },//事件参数传递把item 和 index放到event中的currentTarget和target中 handelEventChuanDi:function(event){ console.log("event里面包含index和item为:"+event.currentTarget.dataset.index+"=="+event.curr原创 2021-08-12 10:03:39 · 183 阅读 · 0 评论 -
12:点击按钮js中方法默认返回数据
js:handleTapEvent:function(event){ console.log(event); },wxml<button bindtap="handleTapEvent">按钮哈哈</button>这里用的是bindtap 举例:event数据解释 detail:触碰点距离左边和距离上边的距离 type:触碰类型 timeStamp:接触事件...原创 2021-08-12 09:50:46 · 260 阅读 · 0 评论 -
11:wxs的使用
WXS的使用是基于 1:在wxml中是不能直接调用Page/Component中定义的函数的 2:但是在某些情况下,我们可以希望使用函数来处理Wxml中的数据(类似于vue中的过滤器)这个时候就要用WXS了test.wxml<!--wxs--> <wxs module="info"> //js代码 <!--var 属于es5 const和var属于es6--> var messages = "原创 2021-08-12 09:36:54 · 205 阅读 · 0 评论 -
10:template模版
/pages/test1/test1.wxml 把这个test1.wxml中代码为模版代码就不变了,为了实现代码的复用<!--pages/test1/test1.wxml--><template name = "tout1"> <view>我们口号前一句是:{{text1}}</view></template><template name = "tout2"> <view>原创 2021-08-12 09:30:09 · 72 阅读 · 0 评论 -
9:点击按钮一下展示一下不展示 wx:if=“{{}}”
wx:if="{{}} 放在组件中可以通过false让其不展示点击按钮一下展示一下不展示Page({ /** * 页面的初始数据 */data: { isshow:true}, handelwxif:function(){ this.setData({ isshow:!this.data.isshow }) }})wxml:<!--wx:if 为true则显示嘎嘎噶嘎嘎嘎嘎 在点击一下则不显示就这样来回切换--原创 2021-08-11 22:52:51 · 289 阅读 · 0 评论 -
8:三目运算符
js:Page({ /** * 页面的初始数据 */ data: { age:20 }wxml:<!--mustache中三目运算符--><view>{{age >= 18 ? "成年人":"未成年人"}}</view>效果:成年人原创 2021-08-11 22:39:54 · 97 阅读 · 0 评论 -
7:选择视频
视频一次性只能选择一个,但是可以多选几次不覆盖js:Page({ /** * 页面的初始数据 */ data: { imagePathVideo:[], videotrue:false },//选择视频 handleChooseAlbumVideo:function(){ //系统APi,让用户在相册中选择图片(或者拍照) var that = this; wx.chooseVideo({ sourceType: ['a原创 2021-08-11 22:19:24 · 55 阅读 · 0 评论 -
6:选择图片
图片可以多选不会覆盖只会叠加js:Page({/** * 页面的初始数据 */ data: { imagePathImage:[], videotrue:false },//选择图片 handleChooseAlbumImage:function(){ //系统APi,让用户在相册中选择图片(或者拍照) var that = this; wx.chooseImage({ //count: 2, success:f原创 2021-08-11 22:04:54 · 66 阅读 · 0 评论 -
5:文本间距space ensp msp
wxml:<text space="nbsp">Hello World \n</text><text space="ensp">Hello World \n</text><text space="emsp">Hello World \n</text>解释:space 文本空格的间距ensp 半个中文字符大小emsp 一个中文字符大小效果:Hello 和 World 之间距离越来越大...原创 2021-08-11 21:42:18 · 324 阅读 · 0 评论 -
4:点击按钮展示数据调换位置
js:<view class="btn-area" id="buttonContainer"> <view class="button-sp-area"> <button type="default" plain="true" bindtap="test">按钮</button> </view></view>wxml:Page({ /** * 页面的初始数据 */ data: {原创 2021-08-11 21:31:14 · 152 阅读 · 1 评论 -
3:open-type获取当前微信用户信息
如何获取微信当前用户的信息:通过open-type,具体需要什么可以通过微信开发工具调试器去查看。wxml<!--获取用户信息--> <button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo"> </button>jshandleGetUserInfo:function(event){ console.log(原创 2021-08-11 17:37:21 · 2058 阅读 · 0 评论 -
2: var that = this 代码
this:指的是当前对象,指的是调用当前对象或函数时里面的元素var that = this小程序代码经常会这样写:但是此时会如上报错,其实此时这个this已经不是小程序 Page 中的属性元素了,而是指的是success 。所有this.speed 就会报错。为了指向speed所有才会出现that。我觉得可以这样理解:handleChooseAlbumImage:function(){ //系统APi,让用户在相册中选择图片(或者拍照) va原创 2021-08-11 17:15:35 · 90 阅读 · 0 评论 -
1:小程序学习地址
小程序官网学习地址:https://developers.weixin.qq.com/miniprogram/dev/framework/小程序平台账号密码:开发设置中找appidhttps://mp.weixin.qq.com原创 2021-08-11 16:59:43 · 106 阅读 · 0 评论 -
前端特殊正则表达式
正则表达式:体积,长宽高: /^\d+([.]?\d)*\*\d+([.]?\d)*\*\d+([.]?\d)*$/ 而且乘号只能是 *正数字(包括小数):/^\d+(\.\d+)?$/原创 2019-09-01 16:15:43 · 126 阅读 · 0 评论 -
Extjs 求起止时间区间值不超过几天或几小时
需求:通过类型确定哪种许可证,里面有有效期止时间,作业许可证时间区间不超过10天,其他不超过8小时 。思路:把时间变为毫秒值在比较!!!!!!!!!!!!里面有 startDate 开始时间endDate 结束时间如何获取呢? var startDate = me.getViewModel().data.permit.startDate; var endTime = me.ge...原创 2019-07-31 18:55:37 · 229 阅读 · 0 评论