小程序入门学习笔记

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可以并列使用

猜你喜欢

转载自blog.csdn.net/qq_43249043/article/details/102727879
今日推荐