一个微信小程序项目包括的初始化大目录就两个
pages
utils
其中在根目录下app.js 在该文件下通过app()这个接口来配置该项目启动时要运行的各种生命周期函数
其次在pages目录下的分页面中也有个.js文件 它们则是通过page()来定义参数data和函数的
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
在page中获得变量值可以直接通过this.data.变量 但要想设置变量值必须通过this.setData({
变量: 新变量值
})
如果要循环生成节点需要用block或label组件包住
<blockwx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"class="slide-image" width="355" height="250"/>
</swiper-item>
</block>
如果要获取多选框或者是picker选定的值可以通过e.detail.value获得
checkboxChange: function(e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
}
对于audio或者是vidio等媒体时需要先利用wx.create...context(id)来获取上下文
onReady: function (e) {
// 使用 wx.createAudioContext获取 audio 上下文 context
this.audioCtx =wx.createAudioContext('myAudio')
}
路由跳转中:
wx.navigateTo({
url: '../ceshi2/ceshi2'
})
是不能跳转到app.json设置了list中路径的!
小程序项目经验:
注意我们在进行项目的过程中可以单独新建一个目录来存放我们的静态资源如图片!
App.json配置:
下导航条设置:
"tabBar": {
"color": "#6e6d6b", //设置底部nav的字体颜色
"selectedColor": "#f9f027", //设置底部nav字体被选中后的颜色
"borderStyle": "white",
"backgroundColor": "#292929",//设置底部nav背景的颜色
"list": [{
"pagePath": "pages/index/index",//设置底部nav最左边路由
"iconPath": "images/footer-icon-01.png",//设置底部nav最左边的小图标路径
"selectedIconPath": "images/footer-icon-01-active.png",//设置底部nav最左边的小图标被选中时替换图片的路径
"text": "极速免税"
}, {
"pagePath": "pages/classify/index",
"iconPath": "images/footer-icon-02.png",
"selectedIconPath": "images/footer-icon-02-active.png",
"text": "分类"
}, {
"pagePath": "pages/cart/index",
"iconPath": "images/footer-icon-03.png",
"selectedIconPath": "images/footer-icon-03-active.png",
"text": "购物车"
}, {
"pagePath": "pages/my/index",
"iconPath": "images/footer-icon-04.png",
"selectedIconPath": "images/footer-icon-04-active.png",
"text": "我的"
}]
},
"debug": true
Index 首页.js代码设计:
var app =getApp()
Page({
data: {
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1000,
loadingHidden: false // loading
},
//事件处理函数
swiperchange: function(e) {
//console.log(e.detail.current)
},
onLoad: function() {//加载时获取用户信息
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo) {
//更新数据
that.setData({
userInfo: userInfo//将获得的信息赋值给全局变量
})
})
//sliderList
wx.request({//一加载就向数据库或接口请求图片数据
url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({//临时设置images全局变量以便在wxml获取该变量~
images: res.data
})
}
})
//venuesList
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({//一加载获取主题馆图片src和navgater中的对应id
venuesItems: res.data.data
})
setTimeout(function () {
that.setData({//当数据获取后但未被渲染时调用加载图
loadingHidden: true
})
}, 1500)
}
})
//choiceList
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/goods/choiceList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({
choiceItems:res.data.data.dataList
})
setTimeout(function () {
that.setData({
loadingHidden: true
})
}, 1500)
}
})
}
})
可以看到我们很多图片的src和跳转链接以及文字说明都是直接从接口获得的,且都是在onload事件中进行变量声明和赋值的,并且大多数数据的结构都是数组+对象~
Wxml结构:(循环渲染结构)
<viewclass="venues_box">
<viewclass="venues_list">
<blockwx:for="{{venuesItems}}">
<viewclass="venues_item">
<navigatorurl="../brand/index?id={{item.id}}">
<imagesrc="{{item.smallpic}}"/>
</navigator>
</view>
</block>
</view>
</view>
<viewwx:if="{{item.tree.desc}}">
1.<text>{{item.tree.desc}}</text>
</view>
<view wx:else>
2.<text>{{item.tree.desc2}}</text>
</view> 如果又数据就渲染1 否则渲染2
带参路由传递接收参数页面js部分:
var app =getApp()
Page({
data: {
},
onLoad: function(options) {
var that = this
wx.request({
url: 'http://www.huanqiuxiaozhen.com/wemall/venues/getBrandAndType?id=' +options.id,//接收从主页面传过来的参数然后进行数据请求;
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
that.setData({
brandList: res.data.data//数据请求成功后渲染到该页面!
});
}
})
}
})
微信小程序一般开发思路:
首先考虑要设计几个list页面(官方给的是2-5个),其次是设计获取数据的api以及数据格式(一般是数据包对象),接着是在onload生命周期函数中进行数据的获取以及wxml变量的设置,一般的我们的数据会包含以下几种信息,一个是text文本,一个是src(图片的) 最后是我们的页面跳转的参数!
当首页渲染完成后我们就可以获得一个带有参数的跳转路由,我们点击后会将url?后面的参数传递给目标页面,同时由于我们提前在目标页面的js文件中设置onload事件中的option进行参数获取,然后再进行wx.request()数据请求,获得数据后再设置该页面的数据变量最后进行页面渲染。不管嵌套了多少层,它的基本实现过程都是这样!
这就是为啥要使用生命周期函数的原因!先获取数据再进行渲染,先onload () 在onready()
微信小程序 模块化开发 通过使用<import src='' /> 与<include src='' />来引入不同的wxml中内容从而实现代码复用
如:import 方式
二、include 方式:
在小程序中是没有e.stopProgation()这个阻止事件冒泡的方法 我们使用catch这个来绑定事件就可以达到目的
微信小程序也是可以像vue跟react一样使用够公共的组件来实现模块化组件化开发的 自定义组件的方式如下图步骤:新建一个组件目录 然后在该目录下新建一个 .wxml 写该组件的结构内容
然后再新建一个.json配置文件 声明这是一个组件
接着新建一个.js文件 注册该组件
经过这样 我们就可以在其他页面使用这种公共组件了
使用前 我们还需要引入该组件 引入的方式如下 首先在目标页面的.json文件 增加一个配置 如下
接着就可以在wxml 中使用啦
组件之间的事件传递跟vue的父传子 子传父 原理是差不多的
如何让组件定义的方法一加载就执行?
答案就是在组件中利用组件钩子函数中的attach()
组件的自定义属性:
使用自定义属性值:
这样我们可以直接在组件wxml中使用{ { nowIn } }就能获取值 在自身组件内使用该值:this.data.nowIn就好
--------------------------------------------------------------------------------------------
小程序路由跳转:
--------------------------------------------------------------------------------------------------------------
微信小程序授权方式:
------------------------------------------------------------------------------------------------------------------------------
微信缓存: