微信小程序开发初体验--教你开发小程序

时间  2019-12-05
标签 微信 程序 开发 体验 繁體版
原文   原文链接

01150211_zFie.jpg

微信小程序面世以来受到的关注颇多，直到最近我才动手尝试进行了小程序的开发，整体上感受仍是不错的，有一点不适应的就是要摆脱Web APP开发对DOM的操做。在这里我就把我是如何利用API开发微信小程序的过程写成教程，教你们快速上手体验一次微信小程序的开发。javascript

补充: 以前忘了把源码发上来，完成以后就已经放在Github上了 点我下载>>php

在开始以前咱们先来看下成品的效果图html

01150211_PHv0.gif

准备工做

咱们先肯定想要开发一款什么样的小程序，首先要符合「小」，由于咱们此次是要体验小程序的开发，因此尽可能不要弄得太复杂；其次是「快」，小程序里须要的数据啊、资源啊，最好是现成就有的，本身写个API什么的这就太耗时了，就不叫快速上手了。java

因此呢，若是能调用现成的API那是极好的，通过一番挑选，我选择了聚合数据的历史上的今天API，调用这个API获取数据，咱们只要作2个页面就能够彻底展现出来了，又「小」又「快」哈XDgit

API一枚: 「历史上的今天」
微信小程序开发者工具
注: API须要注册以后得到KEY才能使用，具体请查看聚合数据官方文档，这里默认各位已经注册并拥有相应API所需的KEYes6

工程结构

微信开发者工具的安装和使用在这里就很少做介绍了，有疑问的话能够看微信官方的简易教程github

先建立一个工程，依次点击「添加项目」－－「无AppID」，而后填好「项目名称」并选择「项目目录」，点击「添加项目」json

01150211_DxS6.png

而后咱们来清理一下默认工程的目录结构，删除如下目录和文件小程序

pages/logs/
pages/index/index.wxss

建立如下目录和文件微信小程序

pages/detail/ pages/detail/detail.js
pages/detail/detail.wxml
pages/templates/ pages/templates/item.wxml
res/

如今你看到的目录结构应该是这样子的

.
├── app.js ├── app.json ├── app.wxss ├── pages │   ├── detail │   │   ├── detail.js │   │   └── detail.wxml │   ├── index │   │   ├── index.js │   │   └── index.wxml │   └── templates │       └── item.wxml ├── res └── utils └── util.js

01150211_1S1R.png

这就是咱们工程目录的最终结构了，后面还会添加资源进去，可是总体结构仍是这样不会改变的

修改配置

微信小程序是经过修改app.json文件改变全局配置的，具体的可配置项请各位自行查阅小程序文档的配置一节

打开app.json，修改为

{
  "pages":[ "pages/index/index", "pages/detail/detail" ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3e3e3e",
    "navigationBarTitleText": "历史今日",
    "navigationBarTextStyle":"white" },
  "debug": true }

咱们这里修改了导航栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText)，为了方便查看调试信息，我还开启了debug模式

全局配置以及搞定啦，接下来正式开始编码

首页布局

前面已经说了咱们要作的是「历史上的今天」这样的一个小程序，因此同一个日期会有不少条目，最多见的布局就是作成列表

列表里会有不少的条目，数量是不肯定的，因此咱们不能在页面里写死了布局，这时候就要用到模板(template)了，咱们能够在模板中定义代码片断，而后在不一样的地方调用

咱们来定义一个模板，打开pages/templates/item.wxml，添加代码

<template name="tItem"> <navigator url="../detail/detail?id={{item.e_id}}"> <view class="ui-list-item ui-pure-item ui-border-b"> <view class="ui-item-span"><text>{{item.date}}</text></view> <view class="ui-item-content ui-nowrap"><text>{{item.title}}</text></view> </view> </navigator> </template>

注: 模板的使用细节请参考官方文档模板一节

接下来打开pages/index/index.wxml删掉里面的内容，咱们要在这里编写列表页，这里会使用到咱们上面定义的模板

<import src="../templates/item.wxml"/> <scroll-view scroll-y="true" class="flex-row ui-list ui-border-t"> <template is="tItem" data="{{item}}" wx:for="{{events}}"/> <view class="ui-tips"> <view wx:if="{{hidden}}"><text>没有更多内容了</text></view> <view wx:else><text>内容加载中...</text></view> </view> </scroll-view> <loading hidden="{{hidden}}">Loading...</loading>

能够注意到第一行使用了import将模板引入到页面中，而后再使用is属性，声明须要使用的模板，用data属性传入数据供模板使用

注: 模板拥有本身的做用域，只能使用data传入的数据

为了测试和查看布局效果，咱们打开pages/index/index.js删除里面的代码，而后添加如下代码手动建立数据传入给页面渲染

Page({
  data: {
    hidden: true,
    events: [
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 历史上的今天" }
    ]
  }
})

保存后点击开发工具左侧的编译，便可查看到效果

01150212_n8l4.png

注: 布局会用到图标字体，导入到res/下，样式则写在app.wxss全局样式表中，图标字体文件和样式请从源码中获取，这篇教程不做样式的说明

详细页面

首页的布局已经完成了，暂时放下首页列表，接下来开始编写详细内容的页面

打开pages/detail/detail.wxml，添加内容以下

<view class="container"> <view class="ui-title ui-border-b"><text>{{detail.title}}</text></view> <view class="ui-content"><text>{{detail.content}}</text></view> <block wx:for="{{detail.picUrl}}"> <view> <view><image mode="aspectFit" src="{{item.url}}"/></view> <view class="ui-pic-title"><text>{{item.pic_title}}</text></view> </view> </block> </view> <loading hidden="{{hidden}}">Loading...</loading>

搞定，这个页面就这么简单就OK了，如今咱们打开pages/detail/detail.js手动添加数据到这个页面中查看效果

Page({
  data:{
      hidden: true,
      detail: {
          title: "历史上的今天",
          content: "历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天",
          picUrl: [
              {
                  url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
                  pic_title: "这是图片标题" }
          ]
      }
  }
})

01150212_bInW.png

填充数据

如今页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始以前咱们先清理一下无用的代码

打开app.js删掉无用的函数和属性

App({

})

以上这步是额外步骤，并不影响咱们接下来要作的事情

打开utils/util.js并清空里面的代码，添加以下内容

// 查询事件列表的Base URL const API_URL_L = "http://v.juhe.cn/todayOnhistory/queryEvent.php" // 查询详细信息的Base URL const API_URL_D = "http://v.juhe.cn/todayOnhistory/queryDetail.php" // 申请API得到的KEY const API_KEY = "YOUR API KEY" // 获取事件列表 function fetchEvents(today) { var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_L,
            data: {
                key: API_KEY,
                date: today
            },
            header: { 'Content-Type': 'application/json' },
            success: resolve,
            fail: reject
        })
    }) return promise
} function getEvents() { var tmpDate = new Date() var today = tmpDate.getMonth() + 1 today = today + '/' + tmpDate.getDate() return fetchEvents(today)
        .then(function(res) { // console.log(res.data.result) return res.data.result
        })
        .catch(function(err) { console.log(err) return []
        })
} // 获取详细信息 function fetchDetail(e_id) { var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_D,
            data: {
                key: API_KEY,
                e_id: e_id
            },
            header: { 'Content-Type': 'application/json' },
            success: resolve,
            fail: reject
        })
    }) return promise
} function getDetail(e_id) { return fetchDetail(e_id)
        .then(function(res) { // console.log(res.data.result) return res.data.result
        })
        .catch(function(err) { console.log(err) return []
        })
} module.exports = {
    getEvents: getEvents,
    getDetail: getDetail
}

注: 请将API_KEY的值替换为你申请到的KEY

咱们要利用API获取的数据有两种，一是「事件列表」，另外一种是事件对应的「详细信息」，上面使用到了ES6原生提供的Promise对象，具体请参考阮一峰的《JavaScript 标准参考教程（alpha）》中「Promise对象」一节

最后还用到了module.exports对外暴露两个函数，使外部能够调用

咱们继续打开pages/index/index.js文件，修改为这样

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

Page({
  data: {
    hidden: false,
    events: []
  },
  onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 var self = this
    util.getEvents().then(function(data) { self.setData({
        hidden: true,
        events: data
      })
    })
  }
})

而后打开pages/detail/detail.js，修改以下

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

Page({
  data:{
      hidden: false,
      detail: {}
  },
  onLoad:function(param){ // 页面初始化 param为页面跳转所带来的参数 var self = this util.getDetail(param.id).then(function(result){
        self.setData({
            detail: result[0]
        })
    })
  },
  onReady:function(){ // 页面渲染完成 wx.setNavigationBarTitle({
        title: this.data.detail.title
    }) this.setData({
        hidden: true })
  }
})

这里咱们调用了wx.setNavigationBarTitle方法动态设置导航栏的标题内容，须要注意的是必须在页面渲染完成以后，即onReady以后才能调用该方法修改导航栏标题

此次教程就到这里结束啦～涉及到的部分知识点并无详细介绍和说明，若是有不明白的地方请你们根据我给出的连接去查看详细的介绍，此文权当快速上手的一个引子，更加深刻的内容以及小程序的其余API的使用，还须要各位亲自去实践，欢迎交流～

参考连接
微信小程序简易教程
微信小程序框架
微信小程序API
Promise对象

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程