为您找到搜索结果：1312个
自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器，也就是说平常我们看到的轮播图就可以用它来做，不过这个组件有很多样式是固定的，但是，有时候我们的设计稿的面板指示点是需要个性化的，那么如何去修改swiper组件的面板指示点的样式呢？最近在使用swiper的时候也在想这个，最后发现在调试的时候，可以看到他的选择器。如图：123456789<swiper class="swiper-box"indicator-dots="{{indicatordots}}"autoplay="{{autoplay}}"> <block wx:for="{{swiperItem}}"> <swiper-item> <navigator url="{{item.link...
微信小程序中padding-right和margin-right无效
在小程序中遇到样式padding-right和margin-right无效，调试发现设置了padding后，宽度已经大于页面的实际宽度，除了设置float：right之外，找不到办法让右侧padding显示出来。解决：在设置了padding之后又设置了width：100%，所以右侧显示不出来，加个box-sizing:border-box;就可以了 ....
Vue和微信小程序区别
先贴两张图：vue生命周期 小程序生命周期 相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad:页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow:页面显示每次打开页面都会调用一次。onReady:页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期onHide:页面隐藏当navigateTo或底部tab切换时调用。onUnload:页面卸载当redirectTo或navigateBack的时候调用。数据请求在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。VUE:vue动态绑定一个变量的值为元素的某个属性的时候，会在变...
微信小程序~页面注册page
page（），是一个函数，用来注册一个页面，接受一个object参数，指定页面的初始数据，生命周期函数，事件处理函数等等（1）data（object）页面的初始数据初始化数据初始化数据将作为页面的第一次渲染，data将会以JSON的形式有逻辑层传至渲染层所以其数据必须是可以转成JSON的格式（字符串，数字，布尔值，对象，数组）渲染层可以通过WXML对数据进行绑定 初始化数据示例代码.png（2）onLoad（function）生命周期函数--监听页面加载页面加载onLoad一个页面只会调用一次接收页面参数可以获取wx.navigateTo,wx.redirectTo,<navigator/>中的query（3）onReady（function）生命周期函数--监听页面初次渲染完成（4）onShow（function）生命周期函数--监听页面显示页面显示onShow每次打开页面都会调用一次页面初次渲染完成onReady一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互对界面的设置如wx.setNavigationBarTitle请在onReady之后设...
微信小程序~页面跳转
常用APIwx.navigateTo用于保留当前页面、跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。wx.redirectTo当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的10层页面栈。wx.reLaunchwx.reLaunch()与wx.redirectTo()的用途基本相同，只是wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。wx.switchTab对于跳转到tabbar的页面，最好选择wx.switchTab()，它会先关闭所有非tabbar的页面wx.navigateBack用于关闭当前页面，并返回上一页面或多级页面。开发者可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。 区别：（1）wx.navigateTo用于保留当前页面、跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。（2）wx.red...
微信小程序~扫码
为了让用户减少输入，我们可以把复杂的信息编码成一个二维码，利用宿主环境wx.scanCode这个API调起微信扫一扫，用户扫码之后，wx.scanCode的success回调会收到这个二维码所对应的字符串信息。 例如餐厅点餐的小程序，我们给餐厅中每个餐桌编号1-100号，把这个数字编码到二维码中，扫码获得编号之后，就可以知道是哪一桌点的菜，大大提高点餐体验和效率。 代码： <buttonbindtap="code">扫码</button>//扫码code(){//调用wx.login获取微信登录凭证wx.scanCode({success(res){console.log(res)},fail(){console.log(error)}})}扫码后输出结果： //扫码code(){//调用wx.login获取微信登录凭证wx.scanCode({success(res){console.log(res.result);//A座3...
微信登录相关
已有的互联网产品在接入小程序会面临一些和登录态相关的问题：怎么获取微信登录态；怎么把微信帐号和自己的帐号进行打通。在这一节中，我们来介绍一下如何把微信登录应用到你的小程序中。我们先来看看微信登录的整个过程，如图4-22所示。图4-22微信登录的整个过程我们来依次分解一下图中的七个步骤，其中，第1步到第4步我们分别用一小节来讲述，第5步到第7步都和SessionId相关，我们放在4.5.5节一起讨论。4.5.1获取微信登录凭证code首先说到登录，我们可能很正常地想到一个做法：通过wx.login直接拿到微信用户的id编号[5]，再把这个id传到自己的后台，从而知道是哪个微信用户在使用我的服务。而我们上述微信登录的流程中并不是通过wx.login直接获取微信用户的id，那直接获取微信用户id的做法有什么问题呢？假设现在我们有个接口，通过wx.request请求 https://test.com/getUserInfo?id=1 拉取到微信用户id为1在我们业务侧的个人信息，那么黑客就可以通过遍历所有的id，把整个业务侧的个人信息数据全部拉走，如果我们还有其他接口也是...
微信小程序~设置tabBar后，wx.navigateTo不能跳转
当wx.navigateTo跳转链接跟app.json中设置的tabbar中跳转链接一样时，wx.navigateTo就不能跳转可以改为wx.switchTab1、当app.json中设置了tabbar跳转时2、普通跳转wx.navigateTo不起作用，要换成是wx.switchTab ....
微信小程序~tabBar和navigator一起使用无效
1.当注册了tabBar的时候，使用navigator时会发现不能跳转，这个时候需要在navigator上加上open-type=’switchTab’属性<navigatoropen-type="switchTab"url="/pages/index/index">跳到index</navigator>2.当未注册tabBar的时候，navigator可正常使用，默认即可。3.wx.redirectTo(OBJECT) 需要跳转的应用内非tabBar的页面的路径，路径后可以带参数 ....
微信小程序~Flex布局
有一点需要注意的是，你的小程序要求兼容到iOS8以下版本，需要开启样式自动补全。开启样式自动补全，在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。图4-2开发者工具开启样式自动补全在小程序开发中，我们需要考虑各种尺寸终端设备上的适配。在传统网页开发，我们用的是盒模型，通过display:inline|block|inline-block、position、float来实现布局，缺乏灵活性且有些适配效果难以实现。比如像下面这种常见的信息列表，要求内容高度不确定下保持垂直居中：图4-3常见的信息列表排版方式这种情况下，我们更建议用flex布局。在开始介绍flex之前，为了表述方便，我们约定以下术语：采用flex布局的元素，简称为“容器”，在代码示例中以container表示容器的类名。容器内的元素简称为“项目”，在代码示例中以item表示项目的类名。图4-4container容器和item项目4.2.1基本概念flex的概念最早是在...
微信小程序~事件绑定和冒泡
【1】事件绑定和冒泡事件绑定的写法同组件的属性，以key、value的形式。key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。事件冒泡及阻止冒泡案例： 如在下边这个例子中，点击innerview会先后调用handleTap3和handleTap2(因为tap事件会冒泡到middleview，而middleview阻止了tap事件冒泡，不再向父节点传递)，点击middleview会触发handleTap2，点击outerview会触发handleTap1。<viewid="outer"bindtap="handleTap1">outerview<view...
微信小程序~项目步骤和流程
从运营的角度讲制作，不是从程序的角度讲开发，所以简单明晰，通俗易懂，小白也能按照流程完成制作。 微信小程序制作步骤及流程1.确定好微信小程序的的定位和目的如行业，功能，内容，目标用户，目标市场，意向名单，专业作用等。 2.落实小程序的程序制作公司，或者团队若是外部团队，要签订合同，打款之前，到公司实地考察情况。小程序制作的公司很多，并不是每家公司都会制作出你心仪的小程序。这要考察，更要好好沟通。 3.确定好小程序制作文案资料包括设计需求，功能项目，表格表单，广告语言，模板栏目，按钮，跳转链接，运行逻辑，计算公式，展现手段等。 4.小程序设计方案，设计图片出炉交付美工设计，保持沟通，按照文案和沟通内容进行设计。初版审核，是否需要更改设计细节。敲定设计方案。 5.小程序设计切片，程序制作，后台制作设计稿交付前端切片，程序编辑制作。6.小程序相关资料素材上传，功能设置添加相关的文本图片内容，完成小程序。7.小程序测试进行不同环境测试，表单测试，电话测试，后台测试等。 8.申请注册小程序方法一：通过微信公众号后台快速注册微信小程序小程...
微信小程序~页面跳转和路由
一个小程序拥有多个页面，我们可以通过wx.navigateTo推入一个新的页面，如图3-6所示，在首页使用2次wx.navigateTo后，页面层级会有三层，我们把这样的一个页面层级称为页面栈。图3-6使用2次wx.navigateTo后的页面栈后续为了表述方便，我们采用这样的方式进行描述页面栈：[pageA,pageB,pageC]，其中pageA在最底下，pageC在最顶上，也就是用户所看到的界面，需要注意在本书编写的时候，小程序宿主环境限制了这个页面栈的最大层级为10层，也就是当页面栈到达10层之后就没有办法再推入新的页面了。我们下面来通过上边这个页面栈描述以下几个和导航相关的API。使用wx.navigateTo({url:'pageD'})可以往当前页面栈多推入一个pageD，此时页面栈变成[pageA,pageB,pageC,pageD]。使用wx.navigateBack()可以退出当前页面栈的最顶上页面，此时页面栈变成[pageA,pageB,pageC]。使用wx.redirectTo({url:'pageE'})是替换当前页变成pageE，此时页面栈变成[pageA...