微信小程序初体验

时间 2019-12-18

标签微信程序体验繁體版

原文原文链接

小程序最近太火，不过相比较刚发布时，已经有点热度散去的感受，不过这不影响咱们对小程序的热情，开发以前建议通读下官网文档，附连接：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716css

接下来，咱们要实现的小程序效果以下，源码地址：https://github.com/caiya/weapp-ywgo：html

一、注册

打开微信公众平台，单击“小程序”，按步骤开始注册便可，附地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CNvue

这里要注意的就是，小程序目前我的开发者没法单独注册，须要进行企业等资格认证，不过认证那里咱们随意填写，认证通不经过并不影响咱们开发，只是不能正式发布而已。css3

二、初始化项目

注册成功后，进入后台，有个appid、密钥，这两个添加到这里，最后点击肯定便可：git

三、项目结构

来看下wx自动生成的项目结构：es6

其中，pages用来放小程序中的各个页面，这些页面必须在app.json文件的pages参数中进行配置，static是咱们自定义的用来存放静态文件的目录，好比一些image、style等，utils是工具文件夹，放置一些公共类方法，好比request请求封装、时间处理等，下面来主要介绍一下几个文件：github

app.js or page.js：app.js是全局的小程序类，page.js是各个页面层级的类，app.js的代码格式以下：

//app.js

const utils = require('./utils/util.js')

App({
  onLaunch: function () {

  },
  getUserInfo(cb) {
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登陆接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  getNewsInfo(typeId) { 
    var that = this;
    return new utils.Promise((resolve, reject) => {
      if (that.globalData.newsInfo && that.globalData.newsInfo["" + typeId]) {
        resolve(that.globalData.newsInfo["" + typeId])
      }
      return utils.get({ "type": typeId }).then(res => {
        if (!that.globalData.newsInfo) that.globalData.newsInfo = {};
        that.globalData.newsInfo["" + typeId] = res.result.data;
        resolve(res.result.data);
      })
    });
  },
  globalData: {
    newsInfo: null,
    userInfo: null
  }
})

其中globalData属性是全局对象，各个page层级的均可以访问，getUserInfo、getNewsInfo是全局方法，全部page下都可调用，onLaunch事件是小程序app启动调用的事件，只走一次，相似的还有page下的onLoad、onShow等，分别表示页面加载后调用、页面显示即调用等。app.json文件是用来配置页面、窗体、tabBar等，好比咱们这里配置底部工具栏四个，可以下配置：

{
  "pages": [
    "pages/hot/index",
    "pages/my/index",
    "pages/my/feedback/index",
    "pages/my/information/index",
    "pages/dynamic/index",
    "pages/dynamic/detail"
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#4BC1D2",
    "navigationBarTitleText": "业务GO",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#353535",
    "selectedColor": "#4BC1D2",
    "borderStyle": "black",
    "backgroundColor": "#FFF",
    "list": [
      {
        "pagePath": "pages/hot/index",
        "text": "热点",
        "iconPath": "static/images/icon@hot.png",
        "selectedIconPath": "static/images/icon@hot-hover.png"
      },
      {
        "pagePath": "pages/circle/index",
        "text": "圈子",
        "iconPath": "static/images/icon@coterie.png",
        "selectedIconPath": "static/images/icon@coterie-hover.png"
      },
      {
        "pagePath": "pages/tool/index",
        "text": "工具",
        "iconPath": "static/images/icon@tool.png",
        "selectedIconPath": "static/images/icon@tool-hover.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "个人",
        "iconPath": "static/images/icon@my.png",
        "selectedIconPath": "static/images/icon@my-hover.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 60000,
    "downloadFile": 60000
  }
}

app.wxss：全局样式类，相一样式会被各个page下的样式覆盖。比较坑的一点是wxss中的样式部分特性不支持，好比background-image属性不支持项目本地路径，可以使用base64或者网络图片地址替换，样式不支持层级调用等。默认有个page样式可修改页面层级的部分显示。

四、关于wx.request请求

小程序下面暂不支持es6语法，可是咱们可使用一些promise工具函数实现promise调用，好比能够本身封装promise版本的request请求以下：json

const DOMAIN = 'https://v.juhe.cn/toutiao/index';
const KEY = 'c419699e576519892ebf87bbd3c8158c';

// 小程序上线须要https
function request(method, data = {}) {
  data.key = KEY;
  // wx.showNavigationBarLoading()
  wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 10000
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: DOMAIN,
      method: method,
      data: data,
      header: { 'content-type': 'application/json' },
      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function (res) {
        // wx.hideNavigationBarLoading()
        wx.hideToast();
        resolve(res.data)
      },
      fail: function (msg) {
        console.log('reqest error', msg)
        // wx.hideNavigationBarLoading()
        wx.hideToast();
        reject('fail')
      }
    })
  })
}

而后导出便可外部使用：小程序

module.exports = {
  categories, Promise,
  get: requestGet, post: requestPost, request,showLoading,requestDynamic
}

这里咱们能够为每次请求添加“加载中”效果，很简单在每次请求前面添加以下代码：微信小程序

wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 10000
  })

请求结束后再次隐藏toast便可：

wx.hideToast();

五、关于免费api调用

小程序开发时咱们不免会进行服务调用，首先必须在这里设置request请求的域名地址（wx规定域名必须是https的才行）：

固然，免费的api仍是有不少，不过大多数都是要进行认证的，不认证的话使用会有部分限制，不太短期不影响。

六、关于项目上传、审核

项目上传须要使用wx的开发工具：

扫码上传以后在这里咱们就能看到上传的版本信息：

固然，上传以后是“开发版”，能够直接在此基础上进行提交审核或者选为体验版，体验版的话管理员帐户能够自行指定体验者的微信帐号，这样的话，即便小程序不发布，体验者也能够和开发者同样扫码预览项目效果，体验者的设置在这里进行：

七、关于数据渲染及页面传参

首先是数据渲染，每一个页面的数据来源是page对象下的data属性，而后在页面里经过双大括号的方式进行数据渲染，了解模板引擎的一看就知道了，以为小程序这种作法相似于一些mvvm框架，数据层修改数据会直接同步到视图层。固然渲染时支持条件判断、循环处理等，这些基本的功能没有少。

其次是页面跳转及传参，这里主要有2种方式，分别介绍以下：

一是使用navigator组件，该组件里面可包含一系列的view组件，navigator组件必须指定url属性，表明单击跳转地址（微信小程序不支持外链跳转，有点失望），使用以下：

<navigator url="detail?id={{item.id}}">
            <template is="mainTabCell" data="{{item}}" />
          </navigator>

这里detail即为某页面名称，参数传递相似get请求时参数拼接传递的方式，固然在js中进行数据获取也比较简单：

onLoad:function(options){
    data_id = options.id;
    //页面初始化 options为页面跳转所带来的参数
    this.refreshNewData();

  }

onLoad事件默认有个options参数，该参数navigator组件传过来的参数，而后进行处理便可。

二是页面跳转，小程序支持以下4种导航跳转：

参数传递的话直接写在其url属性上，相似以下：

wx.navigateTo({
  url: 'test?id=1'
})

八、关于事件处理及分类

小程序中的事件总得分为2种，一种是冒泡、一种是非冒泡事件，使用bind开头绑定的事件为冒泡事件，意思是说若是同一个事件名称，上下两个页面层组件均绑定了该事件的话，那么底下组件的事件处理会先执行，而后再继续执行上层组件的相应代码；使用catch开头绑定的事件不冒泡，事件只会被处理一次。而后是事件对象，事件处理到达page下的js后，会默认传一个event对象，该对象相似以下：

好比以下代码：

<view class="sv__item {{ currentTab ==item.id ? 'active':'' }}" bindtap="changeCategory" data-id="{{ item.id }}" data-index="{{ item.index }}">
          {{ item.name }}
        </view>

咱们使用了bindTap事件处理view单击，参数传递使用data-xxx='yyyy'的形式，其中xxx为key，相应的yyyy为传入的参数值，在事件处理中咱们能够这样获取参数：

changeCategory: function (ev) {
        var that = this;
        var id = ev.currentTarget.dataset.id;
        this.setData({
            currentTopItem: ev.currentTarget.dataset.index
        });
}

经过ev事件对象的currentTarget.dataset.xxx的形式获取xxx参数值便可，顺便说下，页面的参数设置通常使用setData方法进行，而globalData的设置能够直接经过getApp().globalData=xxx的形式便可。

九、关于模板使用

小程序提供模板功能，我的感受相似于vue中的组件概念，模板能够被各个须要的页面进行引入调用，模板的定义使用以下方式：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

在须要调用模板的页面经过如下代码片断使用：

<template is="msgItem" data="{{...item}}"/>

其中msgItem为模板定义时指定的name，item为传入的参数对象，该对象下有idnex、msg、time三个键值对。注意若是模板文件与调用不在同一个文件的话必须先进行模板文件的导入，直接在页面中使用import导入模板页面便可。

十、关于小程序调试

wx开发者工具自带调试功能，可直接对代码、样式文件、缓存等进行编辑查看，还支持console控制台打印：

总结：

一、流畅性：比H5的应用流畅性好，我的以为相比原生还差一点，介乎二者之间

二、开发者工具：自动提示功能有限，大部分状况下要开发者本身手码

三、开发者工具里面看到的效果偶尔和微信里面看到的不一样：好比图片预览、background-image图片显示等

四、登陆方式各异：不少小程序都直接使用微信登陆，也有本身作登陆的，不是很统一

五、布局：小程序使用css3的flex布局，灵活性较高

六、巧用工具：小程序开发有些工具能够方便实用，好比wept，能够支持在浏览器中实时预览小程序页面布局效果，这样开发和设计能够分工开来了；又如wxParse，这个以为比较强大，能够用来处理一些复杂详情页的数据显示等。