卖机票的网站怎么做,产品设计私单网站,wordpress 更新 慢,北京做的比较好的网站公司吗本文章只介绍微信小程序的开发流程#xff0c;如果需要了解其他平台的开发的流程的话#xff0c;后续根据情况更新相应的文章,也可以根据uniapp官网的链接了解不同平台的开发流程
HBuilderX使用#xff1a;https://uniapp.dcloud.net.cn/quickstart-hx.html
开发工具
开始…本文章只介绍微信小程序的开发流程如果需要了解其他平台的开发的流程的话后续根据情况更新相应的文章,也可以根据uniapp官网的链接了解不同平台的开发流程
HBuilderX使用https://uniapp.dcloud.net.cn/quickstart-hx.html
开发工具
开始之前开发者需先下载安装如下工具
HBuilderX官方IDE下载地址
微信开发者工具官方下载地址 这里的前提是已安装nodejs如果没有安装请安装。因为需要本地运行js文件 node安装可以直接在官方下载地址安装 不建议 官方下载地址
使用nvm进行node版本管理安装 个人建议 官方下载Github地址 可以切换node版本可能开发过程中会出现某一些库在一些node版本中不兼容切换系统node版本方便 nvm version # 查看 nvm 版本version 可简写成 小v
nvm v # 显示 node 是运行在 32 位还是 64 位
nvm on # 开启 node.js 版本管理
nvm off # 关闭 node.js 版本管理
nvm arch
nvm ls # 查看版本安装所有版本
nvm ls-remote # 查看远程所有的 Node.js 版本
nvm install 17.0.0 # 安装指定的 Node.js 版本
nvm use 17.0.0 # 使用指定的 Node.js 版本
nvm alias default 17.0.0 # 设置默认 Node.js 版本
nvm alias dev 17.0.0 # 设置指定版本的别名如将 17.0.0 版本别名设置为 dev
nvm uninstall [version] # 卸载指定版本 node
nvm use [version] # 使用指定版本 node
修改nvm的镜像源地址 问题为什么要配置镜像 答配置完国内的镜像后npm install xxx 的下载速度会很快 在 nvm 的安装路径下找到 settings.txt在后面加上这两行设置国内淘宝镜像源
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/修改 npm 默认镜像源
npm是node管理下载模块的工具如果在项目使用的过程中需要一些依赖就可以使用npm命令进行安装 类似于python编译器中的pip包管理工具 npm install 模块名 --registryhttp://registry.npmmirror.comnpm源永久替换为淘宝的镜像源
命令修改
npm config set registry http://registry.npmmirror.com文件修改 打开.npmrc文件~nodejs\node_modules\npm\npmrc没有的话可以使用git命令行建一个( touch .npmrc)用cmd命令建会报错增加 registryhttp://registry.npmmirror.com 即可。node安装目录 如果需要恢复成原来的官方地址只需要执行如下命令:
npm config set registry https://registry.npmjs.org也可以使用cnpm命令不修改npm这里不介绍 由于npm的源在国外所以国内用户使用起来各种不方便可能会出现无法访问发生异常或者下载缓慢等问题。为此淘宝搭建了 cnpm中国 npm 镜像的客户端它是一个完整的 npmjs.org 镜像你可以用此代替官方版本 uniapp小程序
配置 uniapp小程序运行到小程序模拟器前应该在创建的uniapp项目的配置文件manifest.json中配置小程序appid 小程序模拟器路径配置 工具-设置-运行设置 下找到小程序运行配置 选择已安装的微信开发者工具位置 配置node路径 工具-设置-运行设置 下找到node运行配置 在微信开发者工具上面开启服务端口
运行
在微信开发者工具里运行进入hello-uniapp项目点击工具栏的运行 - 运行到小程序模拟器 - 微信开发者工具即可在微信开发者工具里面体验uni-app。
uniapp会生成小程序的应用文件文件目录在项目的 unpackage\dist\dev\文件夹下的mp-weixin 小程序配置
使用常用的UI组件库
1、uview https://www.uviewui.com/ 尤其针对底部tabbar动态显示给出了优化方案采用还是原生得tabbar uView2.0重磅发布利剑出鞘一统江湖https://ext.dcloud.net.cn/plugin?id1593 2、Thor UI组件库 https://thorui.cn/doc/ ThorUI组件库 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?id556 3、 GraceUI http://grace.hcoder.net/manual/info/167-110.html
4、FirstUI 组件库 FirstUI(https://www.firstui.cn/) FirstUI 组件库 - DCloud插件市场https://ext.dcloud.net.cn/plugin?id7646 5、vantUi 组件库 https://vant-ui.github.io/vant-weapp/#/home
uview安装和使用
uView依赖SCSS您必须要安装此插件否则无法正常运行。
如果您的项目是由HBuilder X创建的相信已经安装scss插件如果没有请在HX菜单的 工具-插件安装中找到scss/sass编译插件进行安装 如不生效重启HX即可如果您的项目是由vue-cli创建的请通过以下命令安装对sass(scss)的支持如果已安装请略过。
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D使用npm安装
初次使用npm安装的话在项目页面下初始化一下
npm init -y安装uview
npm install uview-ui1.8.8如果npm下载 npm err network报错的话就需要修改npm的下载源地址(npm下载默认源是国外地址) 也可使用国内的下载工具cnpm 配置使用
引入uView主JS库 在项目根目录中的main.js中引入并使用uView的JS库注意这两行要放在import Vue之后。
// main.js
import uView from uview-ui;
Vue.use(uView);在引入uView的全局SCSS主题文件 在项目根目录的uni.scss中引入此文件。
/* uni.scss */
import uview-ui/theme.scss;引入uView基础样式 注意 在App.vue中首行的位置引入注意给style标签加入langscss属性 style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import uview-ui/index.scss;
/style配置easycom组件模式 此配置需要在项目根目录的pages.json中进行。 温馨提示 uni-app为了调试性能的原因修改easycom规则不会实时生效配置完后您需要重启HX或者重新编译项目才能正常使用uView的功能。 请确保您的pages.json中只有一个easycom字段否则请自行合并多个引入规则。 // pages.json
{easycom: {^u-(.*): uview-ui/components/u-$1/u-$1.vue},// 此为本身已有的内容pages: [// ......]
}
