uni-app语法+微信小程序语法多端移动端项目创建

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

uni-app语法+微信小程序语法多端移动端项目创建

2. 框架概述 1.uni-app概述

地址： - 、uni-app、5+、5plus、mui、流应用、HTML5、小程序开发、跨平台App、多终端框架

是框架的创始人

：国内领先的开发服务公司、W3C成员、HTML5中国产业联盟发起单位。

提供了很多工具来服务开发，例如

======》开发工具（微信开发工具）

======>开发框架（微信小程序原生框架）

起源

uni-app是一个使用Vue.js开发所有前端应用程序的框架。 开发编写一套代码，可以发布到iOS、Web（响应式：h5）、各种小程序（微信/支付宝/百度/今日头条/QQ/钉钉/淘宝）、快应用等平台。 有了uni-app在手，你就什么都不用担心了。即使不是跨终端，uni-app也是一个比较好的小程序开发框架

很多人认为微信首先推出了小程序，但事实上，它是这个行业的先驱。

2012年开始研发小程序技术，加入W3C和HTML5中国产业联盟，并推出开发工具，为后续产业化做准备。

2015年，正式商业化自己的小程序vue开发微信小程序，产品名为“流媒体应用”

2015年9月，推动微信团队开拓小程序业务

经过分析，微信团队决定在2016年初推出小程序业务，但并没有采用联盟标准，而是定制了自己的标准。

由此产生的混乱局面是不可取的。 因此我们决定开发一个免费的开源框架。

由于巨头们无法就标准达成一致，因此这个框架可以用来为开发抹平平台之间的差异。

2、为什么要学习uni-app？

vue语法+微信小程序语法多端移动项目

1.uni-app是一套可以适用多端的开源框架，一套代码可以同时生成原生app端、小程序端和h5端等13大平台。
2.uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件语法一致，所以对于现在的主流前端人员来说学习几乎0成本
3.uni-app拓展能力强，封装了H5+,支持nvue，也支持原生Android，ios开发。可以将原有的移动应用和H5应用改成uni-app应用。

3.其他多终端框架

美团的：mpvue(vue)
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的风格去开发小程序。（vue）
​
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架(react)
react-native(facebook：2015年) 多端开发框架（android  ios）(react)

3. 项目创建

创建项目有两种方式，**种是通过工具，另一种是使用vue-cli脚手架。 建议使用工具来创建和管理项目。

1.工具创建（推荐） 1.1 下载工具

地址：https://www.dcloud.io/hbuilderx.html

下载后直接安装即可；

注意，如果无法启动安装，请参考连接说明：

地址：文档

设置自动保存

该工具没有自动保存设置功能。 通常写完代码后需要按住ctrl+s键保存。 您可以在插件市场安装自动保存插件。

插件安装地址：-插件市场

1.2 注册开发账号

地址：开发中心

相当于我们在微信公众平台注册了一个小程序账号，方便后期管理和分发我们创建的应用。

注册成功后，登录并提示我们通过电子邮件进行验证。 点击获取激活邮件。 如果无法点击激活邮件，请尝试更换浏览器。

1.3 账户登录工具

*后使用注册的账号登录该工具，如下： 这样我们通过该工具创建的项目就会在后台进行管理

1.4 创建项目流程

我们可以点击工具中的文件创建，或者右键工具左侧的空白处进行创建；

1.5 运行项目

我们的开发项目主要使用Vue语法和微信小程序语法，所以*终工具帮助我们编译成可以在不同平台上运行的代码包。 记住，我们需要在工具中开发业务逻辑，效果需要在各个终端平台对应的开发工具中查看。

1.5.1 运行到h5

我们只需选择项目中的页面文件并点击工具栏上的运行，并选择对应的终端平台即可；

1.直接进入系统自带浏览器运行

h5端本地运行不会生成本地代码包，和vue一样在内存中运行；

2.运行到内置模拟器

首次运行需要下载，按照提示连接直接下载即可；

注：跨域问题不再复现，模拟器内部已解决；

1.5.2 运行到小程序

我们在里面开发，你可以在小程序开发工具中看到实时效果。

下面是运行微信小程序的例子。 步骤如下：

1.配置ide路径

首先，在工具中配置微信小程序开发工具的安装路径。

2.打开小程序工具的端口号

打开微信开发工具端口号

3.配置appId

打开项目中的.json文件，选择微信小程序配置，填写小程序的appid，如下图：

4.开始运行

如果运行成功，会生成编译好的微信小程序代码包，位置如下：

注意：

如果微信开发工具无法正常启动，则需要开发手动启动，然后将uni-app生成的小程序项目的路径（mp-）复制到微信开发工具中。

2.vue-cli脚手架创建（理解）

步

2.1 创建项目

注意前提：先安装脚手架（安装完后无需再次安装）

vue -p /uni--vue 我的-

2.2 运行项目

注意，项目创建完成后，首先进入项目根目录，执行npm 。 至此，h5端工程就编译完成了。 如果需要编译其他终端，请停止该服务并执行以下 npm run dev + 代码运行。

npm 运行开发：%%

：平台手段

例如运行到微信小程序：

npm 运行 dev:mp-

2.3 发布项目

npm 运行构建：%%

例如运行到h5结束

npm 运行构建：h5

2.4 平台对比代码

3. 两者创建工程的区别 3. 工程目录结构

4.创建页面 5.项目配置pages.json

全局配置和页面配置

全局外观配置

文件位置：pages.json 文件

，使用原生微信小程序全局配置中相同的选项来设置应用的状态栏、导航栏、标题、窗口背景色等。

// 等同于微信小程序中的window配置项
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "app",
        "navigationBarBackgroundColor": "#f00",
        "backgroundColor": "#F8F8F8",
        "enablePullDownRefresh":true,
        "navigationStyle":"default"
    },

2页配置

文件位置：pages.json 文件

pages-------->{ path:'path', style: }，用于设置页面的路由、状态栏、导航栏、标题、窗口背景色等。

// 页面配置项
    "pages": [ //pages数组中**项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            //页面路由 
            "path": "pages/index/index",
            // 页面的window配置项
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh":false
            }
        }
        ,{
            "path" : "pages/ceshi/ceshi",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],

3 配置

文件位置：pages.json 文件

// 配置tabbar
    "tabBar":{
        "selectedColor":"#ff053f",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首页",
                "iconPath":"static/images/icon/index.png",
                "selectedIconPath":"static/images/icon/indexFull.png"   
            },{
                "pagePath":"pages/ceshi/ceshi",
                "text":"我的",
                "iconPath":"static/images/icon/my.png",
                "selectedIconPath":"static/images/icon/myFull.png"  
            }
        ]
    }

7. 基本语法

语法：vue语法（数据绑定列表渲染条件渲染事件绑定等）+微信小程序语法（组件api生命周期页面事件函数等）

1数据绑定

使用vue语法  标签属性绑定： v-bind | :          标签内容绑定：{{}}

2 条件渲染

使用vue语法    v-if    v-else-if   v-else  

第 4 节

3 列表渲染

使用vue语法   v-for   :key

防范措施：

1、H5平台使用v-for循环整数与其他平台有区别。 例如v-for="(item,index) in 10"，H5平台的item从1开始，其他平台的item从0开始。 使用第二个参数索引要一致。

2.非H5平台循环对象时不支持第三个参数，如v-for="(value, name, index) in "，不支持index参数。

4 事件绑定

使用vue语法， v-on | @
不能使用微信小程序中bind或者是catch绑定事件 ，但是可以使用微信小程序事件类型  比如：@tap

5计算属性

computed  语法同vue

6静态资源的介绍和使用

模板：
    
    
    
    
    
    
    
js:
    // 绝对路径，@指向项目根目录，在cli项目中@指向src目录
    import add from '@/common/add.js'
    // 相对路径
    import add from '../../common/add.js'
    注意：js文件不支持使用/开头的方式引入
    
css:
    /* 绝对路径 */  @指向项目根目录，在cli项目中@指向src目录
    @import url('/common/uni.css');
    @import url('@/common/uni.css');
    /* 相对路径 */
    @import url('../../common/uni.css');
    
    //也支持微信小程序语法
    @import  '相对路径';

7种款式配置

1.uni-app 支持的通用 css 单位包括 px、rpx。多端开发建议使用rpx；
​
2.px转rpx工具自动转换设置
工具栏-设置-编辑器设置--开启px转换rpx选项，根据实际设计稿宽度，设置转换比例
​
3.uniapp中支持scss/sass使用
    工具-插件安装-scss/sass编译插件安装。
​
4.uniapp中支持less使用
    工具-插件安装-less编译插件安装
​

配置单位转换：

less/scss 安装：

8. 生命周期

uniapp中完全支持vue（组件生命周期）和小程序的生命周期函数（应用生命周期和页面生命周期），uniapp生命周期包括：应用生命周期、页面生命周期和组件生命周期。
​
1.在app.vue中可以使用小程序的应用级别的生命周期函数；
2.在页面组件（pages目录）可以使用小程序的页面生命周期和vue的组件生命周期函数；
3.在components目录中的组件中只能使用vue的生命周期函数不能使用小程序的页面生命周期函数；
​

九、组件通信 1、单文件组件

根目录下创建components目录，右键选择创建组件。

2父亲对儿子

属性传递：props

3个儿子继承父亲的遗产

事件传递： this.$emit('事件名称','数据')
​

​
// 监听子传父
getSon(msg){
    console.log(msg);
}
​
// 子传父
sendParent(){
    this.$emit('channel',{name:'我叫张三'})
}

4、兄弟之间的组件价值转移

中央事件总线  $emit() $on()
​
新建utils/bus.js文件：
    import Vue from 'vue';
    export default new Vue();
​
// son
sendBrother(){
    BUS.$emit('brother','我是你的兄弟')
},
​
//brother
mounted(){
    // 监听son传值
    BUS.$on('bro',(info)=>{
        console.log(info)
    })
},

5uni-app页面通信

页面通信语法用于将值传输到兄弟组件。 本质上是对vue中$emit $on $once $off等语法的封装。

如果项目中使用了Vue原生语法，则不再建议使用。 只需选择两者之一即可。

地址：

统一应用程序官方网站

uni.$emit()触发全局的自定事件,附加参数都会传给监听器回调。
uni.$on()监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
uni.$once()全局只监听一次
uni.$off()移除监听事件
​
//son
sendBrotheruni(){
    uni.$emit('sendBrotheruni','我是你的兄弟uniapp') 
},
​
//brother
uni.$on('brouni',(info)=>{
    console.log(info)
})
​
destroyed(){
    // 移除监听 防止内存泄露
    uni.$off('brouni')
}

10.全局变量1公共模块（模块化）

定义一个专门的模块来组织和管理这些全局变量，并在需要的页面上引入它们。 这种方式维护起来比较方便，但缺点是每次都需要引入。

使用ES6  commonjs  语法规范

2安装Vue。

将一些经常使用的常量或方法直接扩展到Vue.，每个Vue对象都会“继承”它们。

这样只需要在main.js中定义，在各个页面中直接调用即可。

可以将上面定义的地址直接挂载到vue原型链上：

uni-app引入了这一概念，并在H5、App等平台上实现。

是一种比较简单的使用全局变量的方式。修改后可以同步全局的变化

微信小程序语法  globalData在app.vue文件 js部分中定义

4本地缓存

语法同微信小程序 将wx开头替换成uni开头
    存储数据
    获取数据
    根据key删除数据
    清除所有缓存数据
    获取当前缓存信息

5Vuex

Vuex 是专门为 Vue.js 应用程序开发状态管理模式。 它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式发生变化。 一般用于大型项目开发uni-app语法+微信小程序语法多端移动端项目创建，无需安装vuex内置

新建store/index.js文件
    // 引入vue  vuex  use  new  export
    import Vue from 'vue';
    import Vuex from 'vuex';
​
    Vue.use(Vuex);
​
    export default new Vuex.Store({
        state:{
            age:20
        },
        mutations:{
            change(state){
                state.age+=10;
            }
        }
    })
​
在main.js挂载
    // 引入vuex 挂载到原型链
    import store from '@/store/index.js';
    Vue.prototype.$store = store;
​

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等