微信小程序开发入门教程（一）---hello world

时间 2019-11-08

标签微信程序开发入门教程 hello world 繁體版

原文原文链接

因为没法备案网站，前期作了个微信小程序（开发版）就搁置了，几乎忘了开发过程。如今从新梳理，作个记录。javascript

1、最基本的小程序前端例子hellohtml

一、下载安装微信开发者工具官网： https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 前端

二、运行后首先提示扫码，在手机上确认登陆（我之前注册过微信公众平台，若是你未注册过的话，可能须要先去注册）。登陆后，页面显示了我以前作的几个小程序项目。排第一个的是一个加号（+），用来新建项目。java

三、点上步的加号（+），新建项目名称写的是：hello ；目录我设的是：E:\wxDEV\hello；AppId 我点选的是：测试号；开发模式：小程序；后端服务：默认不使用云服务；语言：javascript ; 而后点：新建node

四、在微信开发者工具界面上，点三个横点（…）弹出E:\wxDEV\hello硬盘目录，里面就是小程序前端代码了。点预览（眼睛形状）图标，会弹出二维码，用手机扫码后，能够在手机上测试使用小程序了。（在手机微信中的微信页面，向下滑动，会出现最近使用过的小程序）数据库

五、但那些代码表示什么呢？手册在：https://developers.weixin.qq.com/miniprogram/dev/framework/ 下面分析一下E:\wxDEV\hello中的代码文件json

5.一、sitemap.json 文件中有个连接：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html；看了一下，是控制微信爬虫，便是否容许页面内容被用户搜索到小程序

5.二、project.config.json 项目配置文件:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html 如：能够设置为小程序插件项目。后端

5.三、app.wxss https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 至关于CSS样式表文件。微信小程序

5.四、app.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE 小程序配置，又分为全局配置和页面配置。如：有哪些页面，页面标题、颜色等

5.五、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 注册小程序APP实例，大概至关于程序入口的main函数吧。

六、目录utils下有util.js 大概是引入外部 js文件；参考：http://www.javashuo.com/article/p-yoffisqw-r.html

七、目录pages下有两个目录，index和logs,每一个目录表示一个小程序页面。其中，后缀为.wxml的至关于html页面，其它相似前面介绍的，分别是样式表、配置和js代码文件。参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

2、只有前端是不够的，没条件搭服务器怎么办？好在微信开发者工具提供了强大的云开发能力，参考上面步骤，新建项目helloyun（云端是node.js语言）

一、参考上面第3步新建小程序项目，项目名称：helloyun ; 目录：E:\wxDEV\helloyun ; AppID:只能选择本身注册的AppID,测试号没法云开发；开发模式：小程序；后端服务：小程序云开发；而后点新建。云开发的例子已生成。能够点预览，并在手机上查看了。手机上小程序自己就至关于教程，其中介绍了两种操做云端数据库（或函数、调用）的办法：一是前端操做数据库；二是在cloudfunctions目录中新建云函数，使用wx-derver-sdk

参考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

二、云开发项目的目录看似更简洁，E:\wxDEV\helloyun目录结构以下：

－－cloudfunctions（目录）

－－miniprogram（目录）

－project.config.json

－README.md

三、miniprogram对应的小程序前端（与本文第一部分相似），对应云端的是cloudfunctions目录（2019年8月8日生成的云开发项目，与之前用旧版开发工具生成的目录结构不同了），新版的 E:\wxDEV\helloyun\cloudfunctions 目录下有4个目录：

－callback

－echo

－login

－openapi

四、先从手机的云开发QuickStart入手，点上传图片，而后拍照上传。根据上传后的提示，打开开发者工具，点云开发，进入云开发控制台（确认你是否已开通了云开发功能），在存储下，能够看到刚上传的my-image.jpg。

咱们仍是从前端入手分析，在开发者工具中，查看E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml 的代码。找到上传图片字样。对应的bindtap是

doUpload。在同目录的E:\wxDEV\helloyun\miniprogram\pages\index\index.js 中，找到doUpload，可看出上传照片最主要的是用wx.chooseImage和

wx.cloud.uploadFile。

五、屡次拍照上传，会发现上传照片会被覆盖，因而在上一步的doUpload函数中加个随机数，由原来的：

const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0] 改成：

const cloudPath = 'my-image'+ Math.random() + filePath.match(/\.[^.]+?$/)[0]

而后上传的图片就不会被覆盖了。

咱们还能够在云存储中新建目录如：goods 而后将代码改成：

const cloudPath = 'goods/my-image' + Math.random() + filePath.match(/\.[^.]+?$/)[0] ，

编译，预览，你会发现图片上传到了云存在的goods目录下。

六、上手云数据库 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html

在云开发控制台的数据库中建立 goods 集合名称。设置权限为全部人可读。

为了方便测试，在E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml 的最后一个</view>以前，加如下代码

<view class="uploader">
<button class="uploader-text" bindtap="mydbadd">数据库add</button>
</view>

同时，在E:\wxDEV\helloyun\miniprogram\pages\index\index.js的最后一个})以前，加如下代码（也就是E:\wxDEV\helloyun\miniprogram\pages\databaseGuide\databaseGuide.js中的代码）

//my测试数据库add
  mydbadd: function() {
    const db = wx.cloud.database()
    db.collection('goods').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新建立的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  },

编译，点击数据库add按钮后，会看到后台数据库中新增了一条记录（确保已在后台数据库中设置了goods集合）。开发者工具控制台console中也有相应的提示。

七、上手云函数 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html

在开发者工具中的 cloudfunctions目录点鼠标右键，能够新建、上传、同步云函数（也可直接在）。从云开发控制台中能够看到我之前写的几个云函数，忘了是干什么用的，能够同步到本地查看。同步下来后，在开发者工具中的相应目录图标会变成一朵云。

在项目根目录找到 project.config.json 文件，能够看到已经有了 cloudfunctionRoot 字段（若是没有，就按官方教程增长）

而后在开发者工具中的 cloudfunctions目录点鼠标右键，增长名为sum的云函数，会在 cloudfunctions目录下生成sum目录及E:\wxDEV\helloyun\cloudfunctions\sum\index.js

让咱们在index.js中的返回值中增长一句： sum : event.a + event.b，即，将index.js的代码修改以下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    sum: event.a + event.b,
  }
}

为了省事，我直接修改了上面第6步的 mydbadd函数代码

//my测试数据库add
  mydbadd: function() {
    const db = wx.cloud.database()
    db.collection('goods').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新建立的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
    wx.cloud.callFunction({
      // 云函数名称
      name: 'sum',
      // 传给云函数的参数
      data: {
        a: 1,
        b: 2,
      },
    })
      .then(res => {
        console.log(res.result) // 3
      })
      .catch(console.error)
  },

这样，在增长数据库数据的同时，就会调用云函数，并在开发者工具的console中显示调用结果。

参考：

Js文件函数中调用另外一个Js文件函数的方法， http://www.javashuo.com/article/p-gqniosmr-bd.html

JS 时间格式化函数 https://www.cnblogs.com/henw/archive/2011/10/17/2215545.html

js生成随机数 http://www.javashuo.com/article/p-ymdcaomv-bk.html