微信小程序开发收藏经验（一）

收集了一些小程序开发中常用到的知识点，记录一下。（请各位大佬指正，萌新一名）

导航栏标题

与iOS开发很相似，小程序的导航栏也可以全局设置一下，在公共文件app.json中设置了导航栏相关样式如下：

"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "小程序组件","navigationBarBackgroundColor": "#f8f8f8","backgroundColor": "#f8f8f8","backgroundTextStyle": "light","enablePullDownRefresh": "true"
}

这个地方是全局设置，如果想要在不同的页面设置各自的标题属性，只需要在该子级文件中设置

{
"navigationBarTitleText": "页面1"
}

子页面调用公共js对象以便调用其方法

子页面想调用共公js的方法，需先在子页面js中先实例化app:具体过程如下

// app.js中写子页面需要调用的公共方法

  App({// 自定义公共方法commonFunction:function(){return "公共方法"}})

在需要调用的子页面中，

var app = getApp();  //先实例化应用
// console.log(app)  //可查看公共app.js里面的方法
Page({data: {"label":app.commonFunction()  //子页面中调用公共appjs的方法}
})

嵌套循环时候，最好重命名下list和index

如果是嵌套循环，很容易出现多个list和index，例如表视图一样，所以在小程序中可以重命名 list 和index 方法为：
wx:for-index=‘重命名’ wx:for-list="重命名"

<view>
重命名list和index：
<text class='{{classname}}' wx:for="{{array}}" wx:for-index="key" wx:for-item="value"> {{key}}--{{value}}    </text>
</view>

善用公共模板

在APP开发中，UI复用是一个很好的手段，在小程序上就是模板template。
在逛小程序联盟的时候发现了一个大湿总结的比我好，搬过来一下。

微信小程序中，如果几个页面中需要引用同一个header/footer，当定义了公共模板时，有两种引用方法如下：

方法一：在公共模板中定义template元素，利用方法 ,这种方式只会显示公共模板的template里面的内容，之外的内容不会显示.

//在wxml中

<import src='公共模板地址'/>
<template is='模板里面template定义的name名称' data='{{引入的数据1，引入数据2}}'></template>

注意：这里的data=’{{引入的数据1，引入数据2}}’ 是在template中要提取js文件中的data数据里面的key名字，否则无法显示。
公共模板的wxml:在公共模板中必须定义每一个template的的name的名字，否则引用的时候无法得知引用具体某一个；

<template name='header'><!--必须有有name不然import方式无法判断到底要引用哪一个tempalte-->
{{title.header}}<!--这个数据只是提取要引用的文件的里面js里面定义的对应的数据，如果在其他文件中定义不在要引用的文件中无效-->
</template>

要引用的文件js定义数据：

data: {
title:{header:'这是template的header部分',footer:'这是template的footer部分',other:'这是tempalt外部部分'}
}

方法二:

<include src="公共模板地址"/>
这种方式是引入了模板中除了tempalte以外的所有内容。
<include src="../../template/footer.wxml"/>
公共模板的wxml:{{title.other}}
js定义的数据：title:{header:'news里面的的header',footer:'这是template的footer部分'}

总结：import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容，显而易见，include方式更简单一些，在wxml中只需要一句话即可。

小程序的尺寸单位rpx

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

小程序中用html、css

小程序中的选择器跟css的一样.

1：.class
2： #id
3: element
4:分组 element,element
5：伪类选择器 :after :before 注意这里加入在了元素之内的最后/最前

引入外部css文件的时候，只需像iOS中导入文件那样，在其css文件的开始写上： @import “外部地址” 即可。
html中布局用div很多，但是在小程序中用view标签，文本用text。
如果想用html原有的元素，必须在wxss中定义元素的display:block不然无法应用，且html元素的id选择器是无法应用的。

事件总结/冒泡事件

小程序的事件主要有：

 touchtab 点击事件touchstart 开始滑动touchmove 滑动中touchend 滑动结束touchcancel 滑动中断

小程序中的wxml中绑定事件有两种：以touchtab为例，在wxml中必须有bind/catch不然无法实现上述事件
bindtouchtab和catchtouchtab bind的不会阻止事件冒泡（元素最里层到最外层函数执行），catch会阻止冒泡，只是冒泡到当前层结束

如果想在元素执行某事件时把元素的某个属性传到后台可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置，查看滑动位置也可以通过touchstart和和touchend的clientx/y获取

看到几个别人写的，石化，我还真是菜啊~

点击更换图片

data: {"banner":"../../../images/banner.jpg","daimaisrc":"../../../images/cart2_xz02.png","bianjie":"../../../images/cart2_xz04.png","shihui":"../../../images/cart2_xz05.png",cityName:"",getChannelByCityId:"",carName:"",carId:""},// 点击选择代买平台daimaiClick: function(e){console.log("-------d："+this.data.daimaisrc);if(this.data.daimaisrc=="../../../images/cart2_xz02.png"){this.setData({daimaisrc: "../../../images/cart2_xz01.png"})}else{this.setData({daimaisrc: "../../../images/cart2_xz02.png"})}},

锚点定位

<!--index.wxml-->
<view class="container">
<!--品牌-->
<scroll-view scroll-y="true" scroll-into-view="{{toView}}"> <view wx:for="{{citysMap}}"><view class="ncq-smal" id="{{index}}">{{index}}</view><view wx:for="{{item}}" wx:for-item="citys" class="ncq-box" data-cityname="{{citys.city_name}}" bindtap="cityNameClick"><label class="ncq-brand-name">{{citys.city_name}}</label></view></view>
</scroll-view><!--  字母导航--><view class="ncq-fixe-nav"><view  wx:for="{{citysMap}}" data-letter="{{index}}" bindtap="rightZmClick"><label>{{index}}</label> </view></view><!-- 字母导航end-->
</view>//字母锚链定位topZmClick: function (event) {var letter = event.currentTarget.dataset.letter;this.setData({toView: letter})},
scroll-view {height: 600px;
}

注：scroll-view必须要设置高度，不然无效
10. 调用工具js文件/utils文件中的函数/变量

在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：
1：在utils被调用的js文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }；
2：在要调用的js文件中模块化引入utils的js文件 var object=require(“utils被调用的js文件地址”)；可以输出一下object就能看到被调用的方法了；
例子如下：

utils中被调用的js：var URl='http://123.23.169';var getImageurl=function(imageurl){
return URl+imageurl;}
//  要引用这个文件的函数或者变量，除了在要引用的的js文件中模块化之外（var utils=require('js地址')），
// 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下：module.exports={URl:URl,//要引用的函数 xx:xxgetImageurl:getImageurl}

要调用的js文件：

// 获得工具utils工具js里面函数,先模块化引用utils里面的js地址  reqiure('js地址')成一个面向对象
var utils=require('../../utils/app.js')
// console.log(utils) 可查看获得的函数
console.log(utils.getImageurl('iamgeaaddress.png'))

后台交互/wx.request({})方法/渲染页面方法解析

小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})

data: {logs:[]},
onLoad:function(){
this.getdata();
}
getdata:function(){//定义函数名称
var that=this;   // 这个地方非常重要，重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了wx.request({url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//请求地址data:{//发送给后台的数据name:"bella",age:20},header:{//请求头"Content-Type":"applciation/json"},method:"GET",//get为默认方法/POSTsuccess:function(res){console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据that.setData({//如果在sucess直接写this就变成了wx.request()的this了.必须为getdata函数的this,不然无法重置调用函数logs:res.data.result})},fail:function(err){},//请求失败complete:function(){}//请求完成后执行的函数})},wxml页面：<view  wx:for="{{logs}}" wx:for-item="value">{{value.catname}}
</view>

scroll-view用法

如果屏幕中某元素的内容超过此元素的高度，可设置元素为scroll-view 为滚动状态元素，这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果；

scroll-view标签的主要属性分为以下几种：


scroll-x/y='true/false'----允许横向/纵向滚动
scroll-top/left='50'--设置滚动条出现的位置
bindscroll='' 滚动中触发的函数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscrolltoupper='scrolltoupper' 滚动到顶部/左边出发的函数scrolltoupper
bindscrolltolower='scrolltolower' 滚动到底部/右边出发的函数scrolltolower
upper-threshold='50' 距离顶部/左边多远时触发scrolltoupper函数
lower-threshold='50' 距离底部/右边多远时触发scrolltolower 函数
scroll-into-view=‘id名字.这个是用来设置此元素的某个子元素出现在最上方，id的名字为此子元素的id

广告轮播

微信小程序广告轮播元素图片所在元素/swiper-item>
其中属性有：

   autoplay:true,//是否自动播放autoplaytxt:"停止自动播放",indicatorDots: true,//指示点// indicator-color："white",//指示点颜色 暂未启动// indicator-active-color："red",//当前选中的指示点颜色暂未启动indicatorDotstxt:"隐藏指示灯",interval: 1000,//图片切换间隔时间duration: 500,//每个图片滑动速度,circular:true,//是否采用衔接滑动current:3,//初始化时第一个显示的图片 下标值（从0）index

图片更改事件：bindchange=‘imgchange’ imagechange()的e.detail.current为当前显示页面的下标值

wxml:<swiper bindchange="imgchange" indicatorDots='{{indicatorDots}}' current='{{current}}' autoplay='{{autoplay}}' interval='{{interval}}'duration='{{duration}}' circular='{{circular}}'><block wx:for='{{imgUrls}}'><swiper-item><image style="" mode="" src="{{item}}" binderror="" bindload="" class='swiper-img'></image></swiper-item></block>
</swiper>
<button  bindtap="autoplaychange" >{{autoplaytxt}}</button>wxjs:Page({data: {imgUrls: ['../../img/3.jpg',//图片src'../../img/6.jpg','../../img/5.jpg','../../img/4.jpg'],autoplay:true,//是否自动播放autoplaytxt:"停止自动播放",indicatorDots: true,//指示点// indicator-color："white",//指示点颜色 暂未启动// indicator-active-color："red",//当前选中的指示点颜色暂未启动indicatorDotstxt:"隐藏指示灯",interval: 1000,//图片切换间隔时间duration: 500,//每个图片滑动速度,circular:true,//是否采用衔接滑动current:3,//初始化时第一个显示的图片 下标值（从0）index},autoplaychange:function(event){//停止、播放按钮if (this.data.autoplaytxt=="停止自动播放") {this.setData({autoplaytxt:"开始自动播放",autoplay:!this.data.autoplay})}else{this.setData({autoplaytxt:"停止自动播放",autoplay:!this.data.autoplay})};},imgchange:function(e){//监听图片改变函数
console.log(e.detail.current)//获取当前显示图片的下标值}
})wxss:　　.swiper-img{width: 100%;height: 500rpx;
}

提示框

<!-- 提示view --><loading hidden="{{loadingHidden}}">提交中...</loading><modal bindconfirm="onTipsConfirm" hidden="{{hiddenTips}}" no-cancel>{{tipsContent}}</modal><toast hidden="{{hideCommitSuccessToast}}">提交成功</toast>
// 提示框参数hiddenTips: true,tipsContent: '',loadingHidden: true,hiddenCommitTips: true,hideCommitSuccessToast: true,// 提示框onTipsConfirm: function (e) {this.setData({hiddenTips: true,tipsContent: ''})},
if (!name) {this.setData({hiddenTips: false,tipsContent: '请填写您的姓名'})return;}

第二种方式：

// 提交成功this.setData({loadingHidden: true,hideCommitSuccessToast: false})// 定时，3秒消化setTimeout(() => {this.setData({hideCommitSuccessToast: true})}, 3000)

数据缓存

onLoad: function () {var that = thisvar brands = wx.getStorageSync('brands');// 从微信缓存中获取数据if(brands){//  console.log("从微信缓存中获取品牌数据");that.setData({brandsMap: brands})}else{//  console.log("从接口获取品牌数据");//获取接口品牌数据wx.request({url: userCarUtil.host + userCarUtil.getBrand_second,success: function (res) {wx.setStorageSync('brands',res.data);// 将数据放入微信缓存that.setData({brandsMap: res.data})}})}```

微信小程序开发收藏经验（一）相关推荐

微信小程序开发大赛经验总结
微信小程序开发大赛经验总结直接上项目什么的,太肤浅了. 看看可能可以避过很多的不用走的坑哦! 个人经历最近也是在做微信小程序,玩一玩. 我的微信小程序创造路程可谓是艰辛.我从大一下就开始独自开发, ...
微信小程序开发项目经验总结02
微信小程序开发项目经验总结02 总结 button设置登录授权小程序:授权.登录.session_key.unionId 做网络请求: wx.request({url: '***',success ...
[干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司"湖北诚万兴科技"最近刚帮客户定制开发.目前已上线的"哎咆课堂"微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要 ...
ready等方法微信小程序_微信小程序开发一些经验
对于微信小程序开发入门,还是比较简单的,只需要具备基本的css+js知识就可以了,成本比较低. 写了小程序和RN之后,有一种原生很笨重的感觉,就是小程序或者是RN等这些新的开发方式在效率上面真的有比较 ...
微信小程序开发BUG经验总结
摘要: 常见的微信小程序BUG! 小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家. 1. new Date跨平台兼容性问题在Andriod使用new Da ...
微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
☀️苏州程序大白一文教你学会微信小程序开发☀️<❤️记得收藏❤️> 目录
微信小程序开发教程(破解版IDE 无内测资格也可使用)
破解版IDE下载地址,以及使用说明: http://download.csdn.net/download/aa841538513/9637813 http://download.csdn.net/do ...
【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...

微信小程序开发收藏经验（一）

微信小程序开发收藏经验（一）相关推荐

最新文章

热门文章