hbuilderx原生开发js方法_uniapp小程序开发指南

以下全文使用wxapp指代小程序应用

1.项目介绍

wxapp是基于uni-app，使用vue.js语法进行开发的微信小程序项目。

2.开发工具

• devtools：微信开发者工具。

  安装完毕使用开发者账号微信登陆微信开发者工具且到开发工具的安全设置中开放服务端口

• HBuilderX：由DCloud推出的web开发IDE。

  安装完毕需要修改运行配置中正确的微信开发者工具安装路径

  推荐插件：NPM，内置终端，uni-app编译，eslint-js，js压缩，css压缩，less编译，scss/sass编译

3.开发前的准备

3.1 小程序账号注册

到微信公众平台注册小程序账号。

3.1 开发环境搭建

Node.js：下载并安装Node.js及npm。

vue-cli：全局安装vue-cli脚手架。

npm install -g @vue/cli
复制代码

3.2 创建uni-app应用

vue create -p dcloudio/uni-preset-vue wxapp
复制代码

创建成功后修改manifest.json，配置已注册的小程序appId

3.3 uni-ui库

uni-ui是DCloud提供的基于vue组件，flex布局的跨端ui框架。

easycom组件模式：按照配置规则全局引入注册组件，而不需要另外引入，注册即可使用。

优点：按需打包

1. uni-ui安装(vue-cli + easycom)

   npm i @dcloudio/uni-ui --save
   
   npm i sass -D
   
   npm i sass-loader -D
   复制代码

2. 编辑根目录下的pages.json，添加easycom节点

   // pages.json
   {
         
     "easycom": {
         
     	"autoscan": true,
       "custom": {
         
   // uni-ui 配置规则