微信web专用工具下载

序言

文中根据 HBuilderX 3.1.22 微信web专用工具 1.05.2106300为具体内容开展表明。

文本文档版本号:1.0.2

更新:2021-09-04 16:42; 2021-10-22 13:46;

一、提前准备

uni-app 是一个应用 Vue.js 开发设计全部前面运用的架构,开发人员撰写一套编码,可公布到iOS、Android、Web(响应式网站)、及其各种各样微信小程序(手机微信/支付宝钱包/百度搜索/今日头条/QQ/快手视频/钉钉打卡/淘宝网)、快应用等好几个服务平台。

1.1 程序安装

建立uni-app有二种,一个是根据 HBuilderX 数据可视化页面,另一个是根据vue-clicmd。本文本文档以HbuilderX为建立表明,以微信web专用工具开展运作新项目和编码表明。

HbuilderX 下载链接:https://www.dcloud.io/hbuilderx.html

HbuilderX 文本文档详细地址:https://hx.dcloud.net.cn/Tutorial/startup

微信web专用工具下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

HbuilderX安裝完毕后,一般必须免费下载开发设计新项目需求的软件,挑选专用工具–>软件安裝–>安裝或去销售市场软件搜索免费下载,随后放进文件目录下的uni_modules文件夹(安裝情况下自动生成),如scss/sass编译程序,App真机运作等。

微信web专用工具安裝完毕后,在菜单栏上挑选 设定–>通用性设定–>安全性–>打开服务端口号

次之,在微信web服务平台(https://open.weixin.qq.com/)申请注册开发者账号,寻找自身的开发设计ID,AppId,并纪录好,为新项目从HbuilderX运作到微信web专用工具做准备。

随后,在微信公众账号台(https://mp.weixin.qq.com/)申请注册相匹配的账户,例如此次申请注册的是微信小程序,则微信webAPPID如下图中寻找:

 然后配备微信web专用工具的AppId,在微信web专用工具页面点一下右上方详细信息->基本资料->AppId开展配备,如下图:

开发工具下配备:点一下右上方详细信息->当地设定->打钩\”不校检合理合法网站域名….\”,如下图:

1.2 vue入门

因为uni-app是以vue为基本的小程序定制开发,因此使用uni-app以前必须对vue有一定的掌握。

vue 文本文档详细地址:https://vuejs.bootcss.com/guide/

二、根据HbuilderX 的uni-app新项目构建

2.1 建立新项目

1.在点一下菜单栏里的文档 -> 新创建 -> 新项目

2.挑选uni-app种类,键入工程项目名,挑选模版,点一下建立,就可以取得成功建立。

uni-app内置的范本有 Hello uni-app ,是官方网的部件和API实例。还有一个关键模版是 uni ui新项目模版,日常开发设计可以参照该模版,终究这一模版已内嵌很多常见部件。

随后在HBuilder X内菜单栏点一下 运作—>运作到微信小程序手机模拟器 –>微信web专用工具,便能基本见到运作成果。

2.2 文件目录填补构建

此次建立应用默认设置版本号,建立后的文件目录如下所示:

1 依据必须给新项目构建对应的文件目录构造。并未免费下载依靠和销售市场软件以前,建立必须的文件夹名称和文档:

2 假如要免费下载vue,vuex等依靠,在以前必须先安裝node.js,而且安裝好node的包管理工具(npm,cnpm,yarn等,一个就可以,本文本文档以npm为例子)

node有关详细地址:http://nodejs.cn/

使用教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

A. 复位package.json文档

B.应用编码,在其中留意最好是再加上–save

  npm install vue --save
  npm install vuex --save  npm install uview-ui --save

免费下载vue和uview依靠。在其中,vue是开发设计uni-app必需的依靠,uview则是uni-app绿色生态的一个优异的UI架构,本文本文档以uview做为前面UI开发框架为前提开展开发设计构建。实行免费下载后,新项目会全自动把依靠放入node_modules文件夹内,可在node_modules文件夹开展查询。随后免费下载开发设计新项目需求的销售市场软件,销售市场软件默认设置自主建立软件所属文件夹名称uni_modules,并储放软件在此。

vue有关详细地址:https://vuejs.bootcss.com/guide/

vuex有关详细地址:https://vuex.vuejs.org/zh/installation.html

uview有关详细地址:https://www.uviewui.com/components/intro.html

最终,建立网页页面和相匹配网页的api文档(本文本文档仅以登陆页面、主页面和登陆api文档为例子),那样一个基本上的构造接构建好啦,最后构造文件目录大致如下所示:

在其中.hbuilderx,unpackage文件夹名称是自动生成,无须独立建立。node_modules,uni_modules文件夹里的文档最好是无须去修改。

C.文件目录构造表明如下所示:

等级1 等级2 等级3 叙述
api 每个模块接口文件夹名称
login.js 登陆模块接口文档
common 公共性控制模块,包括公共基础知识css等
base.css 公共基础知识css
components 合乎vue组件标准的uni-app部件文件目录
node_modules nodejs有关依赖包文件名称
pages 业务流程页面文件储放的文件目录
index index文件夹
index.vue 主页面
login login文件夹名称
index.vue 登陆主页面
static 储放运用引入的当地静态数据資源(如照片、视頻等)的文件目录,留意:静态数据資源只有储放在此,不必放css文件
store vuex文件目录,也是储放公共性特性方式的地区
index.js vuex的主文档
uni_modules 软件销售市场免费下载的第三方UI组件文件目录,储放uni_module标准的软件。
unpackage 装包文件目录,这里有每个服务平台的装包文档。
utils 全局性公共性方式文件目录
common.js 封裝的公共性可重复使用的方式特性文档(对于当今新项目)
request.js 封裝的公共性要求方式文档
utils.js 封裝的公共性可重复使用的方式特性文档(对于全部新项目)
App.vue 运用环境变量,用于配备App全局性款式及其监视运用生命期
main.js Vue复位通道文档
manifest.json 配备运用名字、appid、logo、版本号等装包信息内容的文档
package.json 新项目配备信息内容文档,依靠控制模块的界定
package-lock.json 1.锁住包的版本号,保证再度免费下载时不容易由于包版本号的不同而造成难题

2.加速网络速度,由于该文件中早已纪录了新项目所依靠第三方包的树形结构构造移动和包的下载链接,重装时只需安装就可以,不用做另外的工作中

pages.json 配备网页页面路由器、导航栏、菜单栏等网页页面类信息内容的文档
uni.scss 内置的公共性的css装饰文档
README.md 文本文档表明,可包括文件目录文件目录比照,常见问题,架构应用,技术架构,Git或SVN详细地址,账户密码等

因为在pages建立了登陆页面,因此必须到pages.json去配备有关途径。

pages.json

    \"pages\": [         {            \"path\": \"pages/login/index\",            \"style\": {                \"navigationBarTitleText\": \"登陆\"            }        },        {            \"path\": \"pages/index/index\",            \"style\": {                \"navigationBarTitleText\": \"主页\"            }        }    ]

<!–留意:–>

  • 编译程序到随意服务平台时,static 文件目录下的文档均会被详细装包进来,且不容易编译程序。

  • 非 static 文件目录下的文档(vue、js、css 等)仅有被引入到才会被装包编译程序进来。static 文件目录下的 js 文档不容易被编译程序,假如里边有 es6 的编码,不通过变换立即运作,在手机机器设备上面出错。

  • css、less/scss 等資源不必放到 static 文件目录下,提议这种公共的資源放到建造的 common 文件目录下。

2.3 构建文件目录文档编码

依据必须,大家写一个简易的登陆,应用登陆作用来论述每个文件目录文档中间的联络。

最先,大家先把已建立的有关文档开展初始化到全局性,即在main.js或是App.vue写有关编码:

main.js

%title插图%num

App.vue

随后在被引进的文档写必需的內容信息内容:

base.css

  .clearfix:before{content:\" \";display:table}  .clearfix:after{content:\" \";display:table;clear:both}  .fl{float:left}  .fr{float:right}

request.js

export default function request({    url,    method = \"GET\",    params = {},    header,    loadding = false,    loaddingText = \"加载中...\"}) {    return new Promise((resolve, reject) => {        if (loadding) {            uni.showLoading({                title: loaddingText            })        }        setTimeout(() => {            uni.request({                url,                method,                data: params,                header,                success: (res) => {                    if (res) {                        resolve(res.data)                    } else {                        resolve(res)                    }                    if (loadding) {                        uni.hideLoading()                    }                },                fail: (res) => {                    reject(res)                }            })        }, 1000)    }).catch(err => {        // 这儿既可以捕捉throw的出现异常还可以捕捉reject的出现异常        console.log(\"[Promise catch]:\", err)        if (loadding) {            uni.hideLoading()        }    })}

common.js

export default {    BASE_URL:\"\"}

随后大家逐渐写登陆页面。登陆页面必须写登录名、登陆密码、登陆按键三个部件,则必须使用uview建立。使用uview建立部件以前的好多个保证:

保证1 HBuilder X 是安裝了 scss/sass 编译程序软件

保证2 在根目录下 uni.scss 文档中引进 uview-ui/theme.scss

@import \'uview-ui/theme.scss\';

保证3 在根目录下 App.vue 文档中的style代码块加上 lang=\"scss\"特性 和 引进 uview-ui/index.scss

<style lang=\"scss\">    @import \"uview-ui/index.scss\";</style>

保证4 在根目录下main.js文档中 引进并使用uView的JS库,留意这二行要放到import Vue以后。

import uView from \"uview-ui\";Vue.use(uView);

如果是不愿撰写引进文档编码,即大家每每引进一个UI组件,就必须加上

import xxx from \"uView-ui/components/u-xxx/u-xxx.vue\";

等有关编码。则必须保证5 在根目录下pages.json文档中 ,配备easycom部件方式

// pages.json{    \"easycom\": {        \"^u-(.*)\": \"uview-ui/components/u-$1/u-$1.vue\"    },        // 此为自身原有的內容    \"pages\": [        // ......    ]}

然后我们在pages/login/index.vue,即登陆页面中,引进uview部件和撰写登陆编码:

pages/login/index.vue

<template>    <view class=\"content\">        <view class=\"inp\">            <u-input v-model=\"username\" type=\"text\" :border=\"true\" placeholder=\"输入您登录名\" />        </view>        <view class=\"inp\">            <u-input v-model=\"password\" type=\"password\" :border=\"true\" placeholder=\"请输入密码\" />        </view>        <view class=\"inp\">            <u-button type=\"primary\" shape=\"circle\" style=\"margin-top: 40rpx;\" @click=\"onLogin\">登陆</u-button>        </view>    </view></template><script>    import {        login    } from \'@/api/login.js\'    export default {        data() {            return {                username: \'\',                password: \'\'            }        },        onLoad() {        },        methods: {            onLogin() {                // #ifdef MP-WEIXIN                uni.login({                    success: res0 => {                        login({                            params: {                                username: this.username,                                password: this.password,                                code: res0.code                            },                            loadding: true,                            loaddingText: \"登录中...\"                        }).then(res => {                            this.$store.state.userinfo = res                            if (res) {                                uni.reLaunch({                                    url: \"../index/index\"                                })                            } else {                                uni.showToast({                                    title: \"登录失败\",                                    duration: 1000,                                    icon: \"none\"                                })                            }                        })                    },                    fail: err => {                        console.log(\"fail:\", err)                    }                })                // #endif                // #ifdef  H5                uni.reLaunch({                    url: \"../index/index\"                })                // #endif            }        }    }</script><style scoped lang=\"scss\">    .content {        padding: 20px;        .inp {            margin: 10px;        }    }</style>

之上编码为本开展获得账号登录凭据code,随后才宣布登陆。由于开发人员必须在开发人员网络服务器后台管理,应用 code 获得 openid 和 session_key 等信息内容。随后应用获得的code,和用户名密码一起做为主要参数开展真真正正的登陆要求。在其中,款式最好是内聚力在部件内,部件內部采用的款式,尽可能在style中加上scoped,编译程序的时候会提升部件hash作为前缀来避免款式环境污染。

login网页页面 有要求数据信息,则必须写login.js要求插口:

login.js

import common from \'@/utils/common.js\'import request from \'@/utils/request.js\'// 登陆export async function login(payload) {    return await request({        url: common.BASE_URL   \"http://rap2api.taobao.org/app/mock/229799/http://login\",        method: \"POST\",        params: payload.params,        loadding: payload.loadding,        loaddingText: payload.loaddingText    })}

api文档详细地址: https://cloud.udi-link.com/cps_qlimp/swagger-ui.html

login网页页面 有应用 this.$store.state,则必须对store/index.js敲代码:

store/index.js

import Vue from \'vue\';import Vuex from \"vuex\";Vue.use(Vuex);export default new Vuex.Store({    state: {        userinfo: \"\"    },    actions: {    },    mutations: {    },    getters: {    }})

到此,立即点一下菜单栏上的运作–>运作到微信小程序手机模拟器–>微信web专用工具,結果如下图所显示:

随后假如要开展调节,则须要开启程序调试,点一下程序调试页面的source选择项,寻找相应的编码文档,开展断点调试,例如:

或是同时应用H5方式运作到电脑浏览器,在清除有关会危害编码调节的微信web专用工具方式或特性后,在网页页面上开启控制面板开展调节编码。必须特别注意的是,一部分款式在H5和小程序中表明有差别,尽可能以微信小程序表明为主导。

三、装包发售

应用hbuilderx开展装包发售微信小程序,点一下菜单栏的发售 –> 微信小程序-手机微信,随后它会独立进入微信微信开发工具页面,此刻大家点一下右上方的提交按键,填好版本信息、叙述有关信息 – 明确就可以。

四、常见问题

事宜1

@import \"uview-ui/index.scss\";

假如引进在除开App.vue以外的文档,而App.vue本身沒有引进,很有可能会造成款式不全装饰等难题,例如登陆的登陆密码文本框,当输入支付密码情况下表明清除按键,这时会让登陆密码框下沉。

事宜2

装包小程序仅有包低于2MB才可以提交。