微信小程序-入门笔记

项目结构

Pages:存储所有页面
Utils:存的是工具类，比如格式化时间的函数
app.json、app.js、app.wxss:主文件
app.js: 小程序逻辑(打开小程序，第一个执行的就是这个，即入口)
app.json:小程序的公共配置(全局的)
app.wxss:小程序公共样式表(全局的)
sitemap.json:配置文件

每个小程序页面，都是由.js、.json、.wxml、.wxss四个文件组成的
对于小程序来说，app.js和app.json文件是必须的
对于小程序的页面来说，.js和.wxml文件是必须的

新建页面

在app.json文件的pages下，新建一行，点击保存，会自定生成一个页面

如果删除某个页面，要把app.json的pages下的配置也删除

在pages页面中，排行第一位的就是默认的首页

app.json

navigationBarTitleText:导航栏的标题
navigationBarBackgroundColor:导航栏的背景色
navigationBarTextStyle:导航栏标题的颜色
enablePullDownRefresh:是否开启下拉刷新
backgroundTextStyle:下拉刷新的时候三个小圆点的颜色
backgroundColor:下拉刷新的时候背景颜色

具体可以翻文档 https://developers.weixin.qq.com/miniprogram/dev/reference/

底部导航栏

app.json

 //最少2个，最多5个
"tabBar": {
    "list": [{
      //展示哪个页面
      "pagePath": "pages/main/main",
      "text": "主页",
      "iconPath":"/images/tabs/home.png",
      "selectedIconPath":"/images/tabs/home-active.png"
    },{
      "pagePath": "pages/home/home",
      "text": "home1",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    }]
  },

定义数据

数据绑定

把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可，实例代码如下

  /**
   * 页面的初始数据
   */
  data: {
    info:'init data', //字符串类型的数据
    array:[{msg:'1'},{msg:'2'}], //数组类型的数据
    id:'v1',
    flag:true
  },

	
{{ info }}  





{{flag?'条件为真':'条件为假'}}

事件绑定

在小程序中，不存在网页中的OnClick鼠标点击事件，而是通过tap事件来响应触摸行为。
通过bindTap，可以为组件绑定触摸事件，语法如下

按钮

然后在.js文件中，在Page内，定义

 //按钮的点击事件处理函数
  btnHandler1: function(event){
    console.log("点击了btnHandler1:" + event);
  },

进行赋值

  /**
   * 页面的初始数据
   */
  data: {
    info:'init data', //字符串类型的数据
    array:[{msg:'1'},{msg:'2'}], //数组类型的数据
    id:'v1',
    flag:true
  },

  //按钮的点击事件处理函数
  btnHandler1: function(event){
    console.log("点击了btnHandler1:" + event);
    this.setData({
      flag : !this.data.flag
    });
  },

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

语法示例如下：

  索引是{{index}} 当前项是{{item.msg}}

图片

轮播图

  轮播图1
  轮播图2
  轮播图3

页面跳转

跳转到Test页面  

然后在test页面
test.js

  /**
   * 页面的初始数据
   */
  data: {
    opt:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad被加载了")
    console.log(options)
    //页面上用到的数据，必须在data中定义
    this.setData({
      opt: options
    })
  },

然后在test.wxml中展示

当前的Id值为{{opt.id}}

常用API

Loading对话框

  showLoading: function(){
    wx.showLoading({
      title: '数据加载中...',
    })
  },

  hideLoading: function(){
    wx.hideLoading();
  },

HTTP请求

开发时候设置

HTTP GET请求

方式一

wx.request({
  url: 'http://www.liulongbin.top:3005/api/get?id=1&age=20',
  success: (response) => {
    console.log(response)
  }
})

方式二

wx.request({
  url: 'http://www.liulongbin.top:3005/api/get',
  data:{
    id:1,
    age:20
  },
  success:(response)=>{
    console.log(response)
  },
})

HTTP POST请求

requestHttpPOST:function(){
wx.request({
  url: 'http://www.liulongbin.top:3005/api/post',
  method:"POST",
  data: {
    address: '北京',
    location:'顺义'
  },
  success: (response) => {
    console.log(response)
  },
})

},

小程序开发框架

mpvue

官方文档地址：http://mpvue.com/

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

WePY

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

• 开发风格：接近于 Vue.js，支持组件 Props 传值，自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等等

• 组件化：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题

• NPM：支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包

• Promise：通过 polyfill 让小程序完美支持 Promise，解决回调烦恼

• ES2015：可使用 Generator Fu-nction / Class / Async Function 等特性，大大提升开发效率

• 优化：对小程序本身的优化，如请求列对处理，优雅的事件处理，生命周期的补充，性能的优化等等

• 编译器：支持样式编译器：Less/Sass/Styus，模板编译器：wx-ml/Pug，代码编译器：Babel/Typescript。

• 插件：支持多种插件处理，如文件压缩，图片压缩，内容替换等，扩展简单,使用方便

• 框架大小：压缩后 24.3KB 即可拥有所有框架功能，额外增加 8.9 KB后即可使用 Promise 和 Async Function

上拉加载

1.定义触底距离 -> .json文件 -> 定义 onReachBottomDistance
默认的触底距离为50px
2.监听页面的onReachBottom事件
3.页面值自增后，加载下一页数据

下拉加载

1.json文件 ->定义 “enablePullDownRefresh”:true
2.监听页面的enablePUllDownRefresh事件
3.重置page和list
4.然后接口请求后，关闭下拉刷新UI wx.stopPullDownRefresh()