微信小程序入门学习小结--全局设置、数据请求、双向绑定、页面路由跳转、模板抽取 ...

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　学习微信小程序必备工具，微信小程序开发文档 W3C的这个文档真是超级详细，我们能够在这里查找到微信小程序的API、组件以及一些框架等。

　　结合自己仿写的demo--仿网易蜗牛读书,你会感觉小程序并不难，前提你要属性前端的基本知识，wxml == html, wxss == css,

　　下载微信开发者工具他能帮助我们快速的进行小程序的开发。当然，在开发之前我们还需要拥有一个小程序账号（注册教程），通过账号我们就能够管理自己的小程序了。

　　注：这里有两种注册途径开发demo：

　　　　1、没有申请APPID：可以在新建项目的时候，选择无AppID，但是这种不能再手机上调试。

　　　　2、申请APPID（点我）：点击开发者工具的上面的调试，用微信扫描弹出的二维码，即可在手机上看（苹果和安卓通用），他人也可通过此二维码进行观看，注意有时间限制。

　　PS：申请APPID信息登录的时候，选择其他组织。主体信息登记可以文字随便填（认证码必须按照规定的字数），图片随意（表情包都可以），管理员登记必须是实名制，其他都没什么了，对了，不要去认证什么的，因为你的信息本来就是错了。

　　打开微信开发工具，新建新项目，准备工作结束。

　　一、app.js、app.json、app.wxss，这三个是全局配置文件。

　　如果是入门学习，可以不用理会app.js，简单了解即可，app.wxss是配置全局的样式，一般用于初始化样式，常用样式的class，重点讲一下app.json

{
　　// pages里面是快捷配置生成对应的页面，最上面是第一个展示的页面，可以自己调试
  "pages":[
    "pages/index/index", // 封面
    "pages/logs/logs",  // 日志 
    "pages/leader/leader", // 首页
    "pages/leader/stories/stories",
    "pages/leader/authors/authors",
    "pages/stack/stack", // 分类
    "pages/stack/booklist/booklist", 
    "pages/stack/booklist/bookdetail/bookdetail",
    "pages/bookdesk/bookdesk", // 书架
    "pages/mine/mine", // 个人中心
    "pages/mine/news/news",
    "pages/mine/editInfo/editInfo"
  ],
　　// 设置顶部导航栏的背景颜色、标题、不过颜色有限制，只有两种
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "蒂花之秀读书",
    "navigationBarTextStyle":"black"
  },
　　// 底部的tab切换栏配置，注意list中的四种属性不能缺少，不能用文字图标，可以在iconfont.cn中下载png图片，涂上颜色即可
  "tabBar":{
    "color": "#6d4015",
    "selectedColor": "#1296db",
    "backgroundColor": "#ffffff",
    "borderStyle": "#e0e0e0",
    "list": [
      {
        "pagePath": "pages/leader/leader",
        "iconPath": "./assets/icons/lingdu.png",
        "selectedIconPath": "./assets/icons/lingdu_sel.png",
        "text": "首页"
        },
      {
        "pagePath": "pages/stack/stack",
        "iconPath": "./assets/icons/stack.png",
        "selectedIconPath": "./assets/icons/stack_sel.png",
        "text": "分类"
        },
      {
        "pagePath": "pages/bookdesk/bookdesk",
        "iconPath": "./assets/icons/bookdesk.png",
        "selectedIconPath": "./assets/icons/bookdesk_sel.png",
        "text": "书架"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "./assets/icons/mine.png",
        "selectedIconPath": "./assets/icons/mine_sel.png",
        "text": "我的"
      }
    ]
  }
}

　　二、页面路由跳转

　　wx.navigateTo、wx.redirectTo、wx.switchTab、 wx.reluanch(重启动)，主要是前面三种。

　　1、navigateTo、redirectTo只能开大非tabBar页面（tabBar页面就是在app.json 中设置的tabBar中list的页面），前者可以跳转后可以保存前面的页面，不用重新生成，最多5个，这样加载的速度非常快。后者前面的页面会被销毁，需要重新生成，如果网络较差，会很卡。

　　2、switchTab只能打开tabBar页面，如从index封面页面定时跳到tabBar。

//index.js
//获取应用实例
const app = getApp();

Page({
  data: {
    time: 3
  },
  
  // 三秒进入tabBar页
  onLoad: function () {
    var that = this;
    var count = setInterval(function(){
      that.setData({
        　　time: that.data.time - 1
        });
      if (that.data.time <= 0){
        // 跳转tabBar页面
        wx.switchTab({
          url: "../leader/leader",
          complete: function(e){
            clearInterval(count);
          }
        });
      }
    }, 1000)
  }
})

　　三、模块化开发，比如将共用的js进行封装，common.js,然后通过module.exports进行暴露对应的方法，方便调用

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}

module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye

// 在需要使用这些模块的文件中，使用require(path)将公共代码引入。
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

　　四、wxml渲染

// 数据渲染
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

// 列表渲染
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

// 条件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

// 模板渲染(模板的文件不需要在app.json中配置)
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staff}}"></template>
// page.js
Page({
  data: {
    staff: {firstName: 'Hulk', lastName: 'Hu'}
  }
})
注：在导入模板的时候需要提前引入，wxml: <import src="./index/button/botton.wxml">, wxss: @import "./index/button/botton.wxss"
// 事件渲染
<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

　　五、后台数据请求

　　EasyMock 简单高效的伪造数据用于后台的数据模拟，得到JSON数据，方便开发，个人免费，前端自定义数据格式，同时方便后台的输出格式。

 onLoad: function (options) {
    // 请求数据
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/5a31e9eb513048307be27a9a/test/",
      success: function(res){
        that.setData({authors: res.data.data.index});
      }
    })
  },

　　优化建议：

　1、频繁的去setData

　　频繁的去操作数据setData，给data中的数据进行数据绑定,会造成卡顿。

　2、每次setData都传递大量新数据

　3、后台态页面进行setData

　4、图片资源

　还有一些常用标签：view(div) 、view-scroll(可滚动)、swiper（可轮播）、cover-view（覆盖视图上的文字）、movable-area、icon、text、rich-text、progress等标签元素，请参考微信小程序开发文档。

　　最后再说一句：自己仿写的demo--仿网易蜗牛读书,有兴趣的同学可以看看，仿写一下哦；