微信原生小程序开发_微信小程序原生方法写在哪里

新建项目

项目文件

页面放在pages,建一个目录，包含wxss,wxml,json,js

 project.config.json :个性化配置，界面颜色、编译配置

app.json:全局配置，顶部（window）。底部 tab ，有页面路径。有时候页面的配置会把顶部的配置覆盖。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

这是视图层

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

这是逻辑层

var nameData = {

        name:'小红'

}

注册一个页面 

Page({

         data:nameData //通过框架把数据和页面进行双向绑定

        funciton(e){

                this.setData({

                        name:"小蓝"

            })

        }

})

点击视图层，触发事件，逻辑层就会处理事件，执行响应，从而改变视图层

一般来说，pages/index页面，会调用wx.getUserProfile()方法，展示一个想要获取用户信息的弹窗。

JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

不同设备有不同的宽度和设备像素比。只要用到rpx。底层就会换算。自然做好了兼容

动态绑定样式

声明事件时，元素应该要有bindTap属性，后面跟着事件名字。 

<button bindtap="clickMe">点击我</button>

然后 clickMe:function(){this.setData({msg:'你好'}}

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

事件 | 微信开放文档

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

 返回元素的信息，距离上面的位置等，需要用到wx.createSelector()方法，返回一个实例

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

下拉刷新，请求数据

下拉刷新，设置背景颜色

app.json{

        window:{

        backgroundColor:,

        backgroundTextStyle:light/dark

        }

} 

开启下拉刷新，

json文件中，要设置true。然后js文件中监听下拉刷新。

记得要关闭下拉刷新 

解构data，重新命名为res，接着，用扩展运算符，将旧值和新值，两个对象合并起来，变成新的对象

动态变量，用{{变量}}

wx:for

wx：key 

onReachBottom（） {

}

请求前：wx.showLoading（）

数据回来后complete：wx.hideLoading（）