uniapp开发微信小程序

微信小程序开发指引

前言

本文档我们主要关注微信小程序的开发使用。微信小程序使用微信开发者工具开发，使用其专有语言WXML（WeiXin Markup Language是框架设计的一套标签语言）、WXS（WeiXin Script是小程序的一套脚本语言），WXS结合 WXML可以构建出页面的结构。但为了降低开发门槛，我们研究和使用了mpvue、taro、uni-app框架来开发微信小程序。因mpvue不再维护，且存在较多问题，放弃该框架，taro使用react、vue、Nerv开发。最终我们暂时选择了uni-app， uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

了解微信小程序

官方主页

微信扫描下方二维码查看小程序示例（包括组件、拓展能力、接口、云开发）

image

小程序开发指南

首先应了解小程序账号申请、服务器配置、业务域名配置等点击查看

任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布，见小程序开发指南

开发工具

工具介绍
 微信开发者工具下载及安装

image

微信开发者工具

框架

框架描述

项目文件描述

对于wxml和wxs语法我们只需简单了解就可以了，因为我们最后使用的是vue.js来开发

一个小程序页面由四个文件组成，分别是：

.json 后缀的 JSON 配置文件（页面配置）
.wxml 后缀的 WXML 模板文件（页面结构）
.wxss 后缀的 WXSS 样式文件（页面样式表）
.js 后缀的 JS 脚本逻辑文件（页面逻辑）

主要配置示例

pages: 主包页面路径列表
subPackages: 分包结构配置
window: 全局的默认窗口表现
tabBar: 底部 tab 栏的表现
usingComponents: 导入三方组件

{
  "pages": [
    "pages/home/home",
    "pages/commodity/commodity",
    "pages/message/message",
    "pages/user/user"
  ],
  "subPackages": [
    {
      "root": "pages-home",
      "pages": [
        "community-detail/index",
        "comment-detail/index",
        "release-dynamic/index",
        "user-center/index",
        "webview/index"
      ]
    },
    {
      "root": "pages-commodity",
      "pages": [
        "detail/index",
        "pay-sure/index",
        "mall-comment/index",
        "mall-comment-detail/index"
      ]
    },
    {
      "root": "pages-message",
      "pages": [
        "system-message/index",
        "interactive-message/index",
        "detail/index"
      ]
    },
    {
      "root": "pages-user",
      "pages": [
        "login/login",
        "edit-user-info/index",
        "setting/index",
        "about/index",
        "user-services/index",
        "address/my-address/index",
        "address/add-address/index",
        "order/my-order/index",
        "order/order-detail/index",
        "order/logistics-detail/index",
        "order/release-comment/index"
      ]
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
    "color": "#808080",
    "selectedColor": "#1A1A1A",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "height": "50px",
    "fontSize": "12px",
    "iconWidth": "20px",
    "spacing": "3px",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/images/home_normal.png",
        "selectedIconPath": "static/images/home_selected.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/commodity/commodity",
        "iconPath": "static/images/store_normal.png",
        "selectedIconPath": "static/images/store_selected.png",
        "text": "商城"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "static/images/message_normal.png",
        "selectedIconPath": "static/images/message_selected.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/images/user_normal.png",
        "selectedIconPath": "static/images/user_selected.png",
        "text": "我的"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "位置信息"
    }
  },
  "useExtendedLib": {
    "weui": true
  },
  "runmode": "liberate",
  "usingComponents": {
    "painter": "/wxcomponents/painter/painter",
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },
  "sitemapLocation": "sitemap.json"
}

组件

详细用法

结合小程序拓展组件库使用相关小程序的原始组件,见下方拓展能力部分

API

详细文档

拓展能力

拓展组件
 拓展组件库源码
使用uni-app开发微信小程序的时候，在pages.json文件的usingComponents中可以引用微信拓展组件, 如下引入方式，编译时开发工具将自动编译到项目中

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

调试

使用微信开发者工具运行、调试，与H5调试类似。开发工具自带模拟器，可以进行真机调试，如果后台服务使用本地ip，请打开开发工具，点击右上角"详情"->"本地设置"->"不校验合法域名..."，将其勾选。更多详细内容查看小程序调试

image

了解uni-app

官方主页

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台

快速学习建议

不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法
如果你还不会vue，先取官网学习使用vue

第一步，看完uni-app官网的首页介绍。

第二步，通过快速上手，亲身体验下uni-app。

第三步，看完《uni-app官方教程》，出品人：DCloud，课时：共3节。

快速开始

uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。

可视化的方式

image

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs开始之前，开发者需先下载安装如下工具
HBuilderX：官方IDE下载地址,下载App开发版，可开箱即用
创建uni-app、运行uni-app、发布uni-app、发布为小程序
注意事项

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

image
HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行的设备：

image

命令行的方式

也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目

安装nodejs
nodejs下载网址：https://nodejs.org/en/
环境安装

npm install -g @vue/cli

创建uni-app (模板项目存放于 Github，由于国内网络环境问题，可能下载失败)

vue create -p dcloudio/uni-preset-vue my-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

image
自定义模板
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
更多支持的下载方式，请参考这个插件的说明：download-git-repo
运行、发布uni-app

npm run dev:mp-weixin
npm run build:mp-weixin

框架

点击框架描述查看

微信扫描下方二维码查看小程序示例（包括内置组件、接口、拓展组件、模板）

image
一个uni-app工程，默认包含如下目录及文件：

image
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest.json中配置
在manifest.json中如果只是微信小程序开发，只需关注mp-weixin配置项
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

开发环境和生产环境

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境')
} else {
  console.log('生产环境')
}

主要配置

easycom 配置uView组件库的按需引入，具体介绍见下方组件部分

"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

page.json文件

{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "app-plus": {
            "background": "#efeff4"
        },
        "usingComponents": {
            "painter": "/wxcomponents/painter/painter",
            "mp-slideview": "weui-miniprogram/slideview/slideview"
        }
    },
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "发现",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "disableScroll":true
            }
        },
        {
            "path": "pages/commodity/commodity",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息",
                "enablePullDownRefresh": false
            }
        },{
            "path": "pages/user/user",
            "style": {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false,
                "backgroundColor": "#F0F0F0",
                "navigationStyle": "custom"
            }
        }
    ],
    "tabBar": {
        "color": "#808080",
        "selectedColor": "#1A1A1A",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "12px",
        "iconWidth": "20px",
        "spacing": "3px",
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/images/home_normal.png",
                "selectedIconPath": "static/images/home_selected.png",
                "text": "发现"
            }, {
                "pagePath": "pages/commodity/commodity",
                "iconPath": "static/images/store_normal.png",
                "selectedIconPath": "static/images/store_selected.png",
                "text": "商城"
            }, {
                "pagePath": "pages/message/message",
                "iconPath": "static/images/message_normal.png",
                "selectedIconPath": "static/images/message_selected.png",
                "text": "消息"
            }, {
                "pagePath": "pages/user/user",
                "iconPath": "static/images/user_normal.png",
                "selectedIconPath": "static/images/user_selected.png",
                "text": "我的"
            }
        ]
    },
    "subPackages": [
        {
            "root": "pages-home",
            "pages": [
                {
                    "path": "community-detail/index",
                    "style": {
                        "navigationBarTitleText": "详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path" : "comment-detail/index",
                    "style":{
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                "path": "release-dynamic/index",
                "style":
                    {
                        "navigationBarTitleText": "发布动态",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "user-center/index",
                    "style": {
                        "navigationBarTitleText": "个人中心",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom",
                        "disableScroll":true
                    }
                },
                {
                    "path": "webview/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-commodity",
            "pages": [
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "pay-sure/index",
                    "style": {
                        "navigationBarTitleText": "订单确认",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "mall-comment/index",
                    "style": {
                        "navigationBarTitleText": "用户评价",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "mall-comment-detail/index",
                    "style": {
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        },
        {
            "root": "pages-message",
            "pages": [
                {
                    "path": "system-message/index",
                    "style": {
                        "navigationBarTitleText": "系统消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "interactive-message/index",
                    "style": {
                        "navigationBarTitleText": "互动消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-user",
            "pages": [
                {
                    "path": "login/login",
                    "style": {
                        "navigationBarTitleText": "登入",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "edit-user-info/index",
                    "style": {
                        "navigationBarTitleText": "个人资料",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "setting/index",
                    "style": {
                        "navigationBarTitleText": "设置",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "about/index",
                    "style": {
                        "navigationBarTitleText": "关于",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "user-services/index",
                    "style": {
                        "navigationBarTitleText": "服务协议",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/my-address/index",
                    "style": {
                        "navigationBarTitleText": "我的地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/add-address/index",
                    "style": {
                        "navigationBarTitleText": "添加地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/my-order/index",
                    "style": {
                        "navigationBarTitleText": "我的订单",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/order-detail/index",
                    "style": {
                        "navigationBarTitleText": "订单详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/logistics-detail/index",
                    "style": {
                        "navigationBarTitleText": "物流详情",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/release-comment/index",
                    "style": {
                        "navigationBarTitleText": "商品评价",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        }
    ]
}

组件

同样的在pages.json文件的usingComponents中可以引用微信拓展组件, 如下引入方式，编译时开发工具将自动编译到项目中，真的是非常的灵活，可以全方位引用多方组件，堪称完美。

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

点击组件使用查看,uni-app本身自带组件库，微信扫描下方二维码查看小程序示例（包括内置组件、接口、拓展组件、模板）

image
这里我们同时导入了第三方组件库uView
微信扫描下方二维码查看小程序示例（包括组件、工具、模板）

image

API

详细文档

uni-app中，相对于微信小程序，使用uni代替了wx,如下示例代码。
注意如果项目只运行于微信小程序，使用wx或者uni都可以，如果是运行于多端必须使用uni

wx.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

uni.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

插件市场

插件市场地址
在插件市场中有丰富的各类模板和组件，自行按需导入（使用HBuilder X可视化新建的项目，可以在插件地址中选择使用HBuilder X导入插件，方便快捷）

最后编辑于：2021.07.27 12:25:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,924评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,902评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 107,716评论 0赞 239
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,783评论 0赞 203
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,166评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,510评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,784评论 2赞 311
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,476评论 0赞 196
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,196评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,459评论 2赞 243
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,978评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,321评论 2赞 252
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,964评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,046评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,803评论 0赞 193
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,530评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,420评论 2赞 265

uniapp开发微信小程序

微信小程序开发指引

前言

了解微信小程序

官方主页

小程序开发指南

开发工具

框架

项目文件描述

主要配置示例

组件

API

拓展能力

调试

了解uni-app

官方主页

快速学习建议

快速开始

可视化的方式

命令行的方式

框架

主要配置

组件

API

插件市场

推荐阅读更多精彩内容