1.pages目录下每一个文件夹代表一个页面
2.主目录下的文件都是小程序全局配置
3.1px = 2 rpx ,通常我们使用rpx,因为rpx有自适应屏幕的特性
4.想要修改小程序头顶导航栏的颜色,在app.json目录下增加以下代码
"window":{
"navigationBarBackgroundColor": "#b3d4db"
},
5.小程序想要引入图片只能在page同级目录下再建一个文件夹images,把图片放在里面
6.小程序上面CSS中写的px是逻辑分辨率(pt),图片的像素指的是物理分辨率(px),存在换算关系
其中iphone6中1pt包含2px
7.小程序的初始界面看app.json文件中page数组的第一行
8.swiper块的大小由swiper自己决定,swiper-item默认填充swiper高宽的100%
9.<swiper autoplay="true" indicator-dots="true">
这样写轮播图有自动转跳和出现轮播点的效果
10.数据从服务端传到js再从js传到wxml
11.数据先传到js再到onLoad函数(用this.setData)再到data再到html
12.如果数据有两层
var content = {
img:{
post_image:"/images/a.png"
}
}
wxml里写 {
{
"hello"+img.post_image}}
//显示 hello和图片
13.wx:if
<text wx:if = "{
{
condition}}"> hello </text>
js:
condition:true
//hello可以被显示
14.wx:for
<block wx:for="{
{
post_key}}" wx:for-item = "item">
<text>{
{
item.content}}</text>
<image src="{
{
item.imgSrc}}"></image>
</block>
js:
onLoad: function (options) {
var post_content1 = [{
imgSrc: "/images/post/crab.png",
content: "菊黄蟹正肥"
}]
this.setData({
post_key:post_content1
}) //data中自动接收setData的数据,且setData中的数据一定要是一个对象而不是变量
},
15.事件发生的逻辑
1.产生事件(小程序自动产生)
2.捕捉事件
3.回调函数
4.处理事件
16.bindtap 与catchtap(回调函数)
wxml:
<view class="moto-container" bindtap = "bindTap">
<text class="moto" catchtap="catchTap"> 开启小程序之旅</text>
</view>
js:
bindTap:function(){
wx.navigateTo({
url: '../posts/post',
})
console.log("bindTap")
},
catchTap:function(){
wx.navigateTo({
url: '../posts/post',
})
console.log("catchTap")
}
//效果:点击文字出现catchtap效果,点击文字以外的padding出现bindtap效果
但是如果把wxml里面的catchtap改成bindtap
点击文字会同时打印catchTap和bindTap
17.用专门一个文件夹放data
post-data.js:
var data = [{
date: "Sep 18 2016"
}]
module.exports = {
postList: data
}
post.js:
var postsData = require('../../data/posts-data.js')
onLoad: function () {
this.setData({
postList:postsData.postList
});
}
//这样一套下来才算完整把数据放在单独的文件
18.wx.getSetting
官方解释:获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
具体用法:
wxml:
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
js:
bindGetUserInfo: function (event){
wx.getSetting({
//这个一般放一个函数最外面一层,作用是获取已经申请的数据,做判断用
//举个例子,一般情况下 wx.getSetting里面都会用到wx.getuserInfo,但是未授权状态的
// wx.getuserInfo已经无法再使用,所以要用wx.getSetting先判断是否符合wx.getuserInfo使用条件
//wx.getuserInfo可以获取 avatarUrl: city: country: gender: language: nickName: "province: 这些数据
//如果不符合,就不会使用wx.getuserInfo
//但是如果使用button组件就会避免这种情况,因为button组件点击时就获取了用户信息
//wx.getuserInfo不会弹窗
success:function(res){
if (res.authSetting['scope.userInfo']){
wx.getuserInfo({
//可能会弹窗,要防止这种情况
})
}
}
})
},
19.wx.login
作用:调用接口获取登录凭证(code)
用法:
html:
<button bindtap="test"> wxlogintest </button>
js:
test:function(){
wx.login({
success:function(res){
console.log(res.code);
}
})
},
特别说明:无需授权获取任何东西,直接用就可以获取code,和wx.getuserInfo可以并列使用