小工具:http://www.bejson.com
API测试工具:postman
--------------------------------------------------------------
1.系统顶级文件
app.js app.json app.wxss
project.config.json //编辑器配置文件
--------------------------------------------------------------------------------
单位 rpx 类似rem 设计时以IPONE6为视觉设计稿 1px = 2rpx
使用 flex布局
--------------------------------------------------------------------------------
小程序不存在DOM节点***
------------------------
this.setData({data});//一般用这种写法ES6; 将data拷贝到data函数中传送到前台 非常重要***
注意set过去的数据一定要加""
this.data.name //后台设置值,但是前台不受影响 非常重要***
-------------------------
autoplay="{{true}}"; 带双引号的false与true必须带双括号,因为这个是一个字符串,有则为真
-----------------------
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
在框架中,使用 <view wx:if="{{condition}}"></view> 来判断是否需要渲染该代码块:
或者使用<view hide="{{condition}}"></view>
---------------------------------
<block wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"></block>
---------------------------------
链接跳转(路由):
<view bindtap='onTap'></view> //绑定一个点击事件 bind+tap
page({
next: function(e){
console.log('点击了');
wx.navigateTo({
url: '../posts/posts' //进入posts/posts.wxml
})
},
})
-----------------------------------
冒泡与非冒泡方式
bind:冒泡绑定事件 bindtap
catch:非冒泡绑定事件 catchtap
<view bindtap="s1">
<view bindtap="s2"></view>
</view>
---------------------------------
alt+shift+f 快速格式化
---------------------------------
第三方js模块必须写出口才能被引入
如想将data/data.js 引入到 index.js中去
data.js写:
var postList = {
status: '200',
msg: '成功',
data: [{
name: '王二',
age: '30'
},
{
name: '张三',
age: '15'
}
]
}
module.exports = {
postList: postList
}
index.js写
var postsData = require('../../data/data.js') //只能使用相对路径
this.setData({
userInfoKey: postsData.postList
});
-----------------------------------------------------------------
template模板的使用(import,include) 见框架引入
import:
head.wxml中
<template name="head"> //加模板名
<view class='title'>
<image src='/images/1.jpg'></image>
<text>{{idx}}-{{item.name}}</text>
</view>
<view class='box-title'>
<text>{{item.age}}</text>
</view>
<view class='list-nr w100'>
{{item.name}}
</view>
</template>
page.wxml中
@import 'public/public.wxss'; //引入css
<import src="base/head.wxml" /> //引入模板
<view class='wz' wx:for="{{userInfoKey.data}}" wx:for-index="idx" wx:for-item="item" wx:key="1">
<template is="head" data="{{item}}" /> //传值data到模板文件中去
</view>
--------------------------------
<include src="base/head.wxml" />
-------------------------------------------------------------------
data-name="{{}}" //数据绑定常用于绑定ID已便传值
1.列表页绑定data-id
<view class='wz' wx:for="{{userInfoKey.data}}" wx:for-index="idx" wx:for-item="item" wx:key="1">
<view catchtap='goarticle' data-id='{{item.id}}'>
<template is="head" data="{{item}}" />
</view>
</view>
2.列表JS点击传值 //不懂怎么写就直接打印e
goarticle: function(e){
var s = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../article/article?id='+s
})
}
3.文章页接受ID //文章页初始化时会将值带入e,不懂的话就打印e有惊喜
onLoad: function (e) {
console.log(e)
}
4.查询数据库->setDate到date中->前台调用
----------------------------------------------
本地缓存(缓存上限为10M)
wx.setStorage('key','value'); 设置获取
wx.getStorage('key',success:function(){}) 获取
wx.removeStorage({ 清除
key: '',
success: function(res) {},
})
wx.clearStorage(); 清除所有
-----------------------------------------------
交互
wx.showToast() //JS的alter
wx.showModal() //JS的config
wx.showLoading() //等待
wx.showActionSheet()
------------------------------------------------
经典图片切换
后台:
musicplay: function(even) {
var isPlayMusic = this.data.isPlayMusic;
console.log(isPlayMusic);
if (isPlayMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayMusic: false
});
} else {
wx.playBackgroundAudio({
dataUrl: 'http://www.yunmaoo.com/s1.mp3',
title: '爱你一万年',
coverImgUrl: '../../images/s1.mp3'
});
this.setData({
isPlayMusic: true
});
}
},
前台:
<view class='ss' bindtap='musicplay'>
<image src='{{isPlayMusic ? "../../images/1.jpg" : "../../images/1.png"}}'></image>
</view>
-------------------------------------------------------------------------------------
wx.playBackgroundAudio //小程序音乐播放,需远程流媒体,本地不行
var that = this;
var backaudio = wx.getBackgroundAudioManager(); //获取小程序音乐总控所有开关
backaudio.onPause(function() {
that.setData({
isPlayMusic: false
});
});
-------------------------------------------------------------------------------------
app.js中定义的值为全局变量
其他页面获取全局变量页面顶部先要使用:
var app = getApp(); //外部引入全局变量
app.xx.xx = true //外部改变全局变量值
---------------------------------------------------------
底部有TAB栏目必须使用路由必须使用wx.switchTab而不能使用wx.redirectTo和wx.navigateTo ***
-----------------------------------------------------------
wx.setNavigationBarTitle //动态改变顶部标题,点进文章页很有用
------------------------------------------------------------
下程序上拉下滑加载思路: *****
1.后台接口思路 m = (page-1)*n select * from table where 1 limit m,n //m:从第几条开始取 n:一次取多少条 page:当前在第几页 前端只需要传值page即可
2.前端思路
第一次加载将值保存到data中的movies,然后改变isEmpty的值为false,而且page加1,加载时判断isEmpty是否为false,如果为false,则说明不是第一次加载,将moveis的值与本次请求的值合并输入到前端,输出的同时将
整个值再次保存到movies中去,page再次加1,合并的方法用concat非常nice。
Page({
data: {
movies: "",
page: 1,
isEmpty: true,
url: ""
},
onLoad: function(options) {
var lname = options.lname;
if (lname == 1) {
var url = 'https://v.juhe.cn/movie/movies.today?key=e9d86d49a817dfd24755c3e840a84cee&cityid=5';
wx.setNavigationBarTitle({
title: '即将上映'
})
} else if (lname == 2) {
var url = 'https://v.juhe.cn/movie/movies.today?key=e9d86d49a817dfd24755c3e840a84cee&cityid=5';
wx.setNavigationBarTitle({
title: 'TOP200'
})
}
this.data.url = url;
this.http_curl(url);
},
http_curl: function(url) {
var that = this;
wx.request({
url: url,
success(res) {
if (res.statusCode == 200) {
var datalist = {}; //创建页面大容器
that.data.page += 1; //页面递增1
if (!that.data.isEmpty) { //不是第一次加载
datalist = that.data.movies.concat(res.data.result); //合并值
that.data.movies = datalist //将合并后的值传入data中保存
} else { //第一次加载
datalist = res.data.result; //将值装入大容器
that.data.movies = res.data.result; //将值传入data中保存
that.data.isEmpty = false; //改变empty的属性
}
that.setData({
datalist
});
}
},
fail() {
wx.showToast({
title: '接口调用失败',
icon: 'none',
duration: 2000
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
wx.showLoading({ //调用加载UI
title: '加载中',
})
var that = this;
var nexturl = that.data.url;
//var nexturl = that.data.url + "?page=" + that.data.page; //由于聚合数据不支持分页调用每次调用全部数据
wx.stopPullDownRefresh({
success(res) {
wx.hideLoading(); //关闭加载UI
that.http_curl(nexturl);
},
fail() {
wx.showToast({
title: '数据获取失败',
icon: 'none',
duration: 2000
})
}
})
},
})
------------------------------------------------------------------------------------------
小程序配置下拉刷新,到需要的页面json中去配置而不是在app.json中配置,否则会影响其他页面
下拉刷新思路:直接取第一次的头二十条给前端
{
"enablePullDownRefresh":true
}
-----
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
var pullurl = this.data.url;
this.data.isEmpty = true;
this.data.movies = "";
this.http_curl(pullurl);
},
-----
backgroundColor:是指下拉刷新的颜色
--------------------------------------------------------------------------------------
搜索页思路
利用input中bindfocus="focus"聚焦隐藏当前页面,显示搜索页面
利用input中bindblur="blur" 失焦显示当前页面,隐藏搜索页面
利用bindconfirm="confirms" 回车直接搜索页面
focus: function(e) {
this.setData({
'change': true
})
},
blur: function(e) {
this.setData({
'change': false
})
},
confirms: function(e) {
console.log(e);
http_url(url);
},
<button wx:if="{{change}}" class='btns' form-type="submit">
<icon type="search" size="18" />
</button>
------------------------------------------------------------------------------
MAP的使用方法(一般都是直接使用百度地图接口,原生的没什么卵用):
markers:定位点
------------------------------------------------------------------------------
选择收货地址(前台点击呼出微信自带收货地址页面供用户选择):
choseaddress:function(){
wx.chooseAddress({
success (res) {
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})
}
-------------------------------------------------------------------------------
小程序登录类似微信公众号登录:
wx.login获取code->服务器带code等信息请求微信服务器获得openid等数据,将session_key经过jwt方式加密方式返回给前端->前端带jwt参数访问小程序
-------------------------------------------------------------------------------
小程序,头像等信息,直接由前端发送给后台
改版之后必须要用户点击才能获取用户信息
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
-------------------------------------------------------------------------------------------------------------
场景值,获取小程序来源方式
判断用户进入小程序的方式(如点餐扫码)
-------------------------------------------------------------------------------