微信小程序初体验

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

接下来,我们要实现的小程序效果如下,源码地址:https://github.com/caiya/weapp-ywgo

1、注册

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

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

2、初始化项目

注册成功后,进入后台,有个appid、密钥,这两个添加到这里,最后点击确定即可:

3、项目结构

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

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

  • 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样式可修改页面层级的部分显示。

4、关于wx.request请求

小程序下面暂不支持es6语法,但是我们可以使用一些promise工具函数实现promise调用,比如可以自己封装promise版本的request请求如下:

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();

5、关于免费api调用

小程序开发时我们难免会进行服务调用,首先必须在这里设置request请求的域名地址(wx规定域名必须是https的才行):

当然,免费的api还是有很多,不过大多数都是要进行认证的,不认证的话使用会有部分限制,不过短期不影响。

6、关于项目上传、审核

项目上传需要使用wx的开发工具:

扫码上传之后在这里我们就能看到上传的版本信息:

当然,上传之后是“开发版”,可以直接在此基础上进行提交审核或者选为体验版,体验版的话管理员账户可以自行指定体验者的微信账号,这样的话,即使小程序不发布,体验者也可以和开发者一样扫码预览项目效果,体验者的设置在这里进行:

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

首先是数据渲染,每个页面的数据来源是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'
})

8、关于事件处理及分类

小程序中的事件总得分为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的形式即可。

9、关于模板使用

小程序提供模板功能,个人感觉类似于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导入模板页面即可。

10、关于小程序调试

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

总结:

1、流畅性:比H5的应用流畅性好,个人觉得相比原生还差一点,介乎两者之间

2、开发者工具:自动提示功能有限,大部分情况下要开发者自己手码

3、开发者工具里面看到的效果偶尔和微信里面看到的不同:比如图片预览、background-image图片显示等

4、登录方式各异:很多小程序都直接使用微信登录,也有自己做登录的,不是很统一

5、布局:小程序使用css3的flex布局,灵活性较高

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python+iOS学习交流

7年iOS架构师教你如何快速提高并掌握 iOS开发核心技能

首先你要花点时间针对objective-c语言的学习;毕竟这个是iOS开发的基础(你也可以尝试用Swift,但此项目只是针对OC),编程套路其实都是差不多,多写...

1341
来自专栏微信小程序开发

微信小程序开发常见问题(七)

知晓程序员,专注微信小程序开发的程序员! 一、判断小程序版本号 小程序的API是不断更新的,你可能使用某个API时,文档里会说明,此API在1.x.x版本开始...

4385
来自专栏数据小魔方

这个包绝对值得你用心体验一次!

这一段时间在研究R里面的数据抓取相关包,时不时的能发掘出一些惊喜。 比如今天,我找到了一个自带请求器的解析包,而且还是嵌入的pantomjs无头浏览器,这样就不...

2936
来自专栏极乐技术社区

极乐问答No.2 | 微信小程序开发40问

导语 微信小程序开发者和开发需求者必读,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考: ? 问答 Q Q1:为什么脚本内不能使用window等对象 ...

2208
来自专栏jianhuicode

那些React-Native踩过的的坑

    这几天开始边学边做新模式,也踩了不少坑,所以会记录下来--俗话说好记心不如烂笔头,何况还没有一颗好记心(-_-)。    从学React-Native开...

1899
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

2767
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

1001
来自专栏听雨堂

将自动通知窗体集成到类中

        在IE的右下角自动弹出一个通知窗口,几秒后慢慢消失,这个现在是很常见的js代码实现的功能,但是,我希望能够把这个功能集成起来,使用时尽量简化,所...

1737
来自专栏吴裕超

datalist标签小结

在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的...

2785
来自专栏前端人人

React多页面应用4(webpack4 提取第三方包及公共组件)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

4745

扫码关注云+社区