微信小程序开发,文档主要看微信官方文档微信小程序官方文档。辅助网址可以看小程序社区
导航栏标题
与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中只需要一句话即可。
5.小程序的尺寸单位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必须要设置高度,不然无效
调用工具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:xx
getImageurl
: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为默认方法/POST
success
: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;
}
第二种方式:
// 提交成功 ~~~javascript this.setData({ loadingHidden: true, hideCommitSuccessToast: false })
// 定时,3秒消化 setTimeout(() => { this.setData({ hideCommitSuccessToast: true }) }, 3000)
## 15.数据缓存
~~~javascript
onLoad: function () {
var that = this
var 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
})
}
})
}
}
wx.request封装
class http {
constructor(){
this.config = {
baseUrl: "",
header: {
'Content-Type': 'application/json',
},
data: { },
method: "GET",
dataType: "json", /* 如设为json,会对返回的数据做一次 JSON.parse */
responseType: "text",
success() { },
fail() { },
complete() { }
}
this.interceptor = {
request: null,
response: null
}
}
//
request(options) {
if (!options) {
options = {}
}
options.baseUrl = options.baseUrl || this.config.baseUrl
options.dataType = options.dataType || this.config.dataType
options.url = options.baseUrl + options.url
options.data = options.data || {}
options.method = options.method || this.config.method
//TODO 加密数据
//TODO 数据签名
/*
_token = {'token': getStorage(STOREKEY_LOGIN).token || 'undefined'},
_sign = {'sign': sign(JSON.stringify(options.data))}
options.header = Object.assign({}, options.header, _token,_sign)
*/
return new Promise((resolve, reject) => {
let _config = null
options.complete = (response) => {
let statusCode = response.statusCode
response.config = _config
if (this.interceptor.response) {
let newResponse = this.interceptor.response(response)
if (newResponse) {
response = newResponse
}
}
if (statusCode === 200) { //成功
resolve(response);
} else {
reject(response)
}
}
_config = Object.assign({}, this.config, options)
_config.requestId = new Date().getTime()
if (this.interceptor.request) {
this.interceptor.request(_config)
}
wx.request(_config);
});
}
get(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
}
post(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
}
put(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'PUT'
return this.request(options)
}
delete(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'DELETE'
return this.request(options)
}
}
var ht=new http()
ht.config.baseUrl = "http://localhost:8080/api/"
//设置请求前拦截器
ht.interceptor.request = (config) => {
config.header = {
"token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
}
//设置请求结束后拦截器
ht.interceptor.response = (response) => {
console.log('个性化response....')
//判断返回状态 执行相应操作
return response;
}
wx.http=ht
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 微信小程序开发