HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

专职uniapp接单(uniapp项目,插件)开发 - 含小程序/APP/H5/PC, 以及uniCloud

外包 插件开发 插件需求

合作前请了解我:https://www.duiyou360.com/resume/detail/EtqVRdyHcTzY6xhd7quIYw==
联系方式vx:front_jason

合作前请了解我:https://www.duiyou360.com/resume/detail/EtqVRdyHcTzY6xhd7quIYw==
联系方式vx:front_jason

【新手教程】一把梭,教你通过uniapp打造小程序全家桶(前置篇)

前言:
本文章全文918个字,阅读需要10分钟!如果您觉得本文章对您有用欢迎给我点赞留言转发。
大家好,我是归来!从今天开始,我将给大家分享开发支付宝小程序的全过程!通过我们的实际项目开发,给大家讲解如何从0到1开发一款属于自己的小程序!当然,开发一款小程序一定不只是涉及到前端这一点点知识。我们本次分享只针对前端开发,后面关于后端开发的过程我们在做另外解答!那我们先进入今天的正题。
正题:
一个公司前端开发中到底需要用到哪些软件呢?
开发工具:

  1. visual studio code
  2. Hbuilder(国内精品)
  3. 各种小程序开发工具
    开发框架:
    一、样式框架
  4. bootstrap
  5. layui
  6. mui
  7. sui
  8. iconfont(阿里免费图标管理样式)
    二、Javascript框架
  9. jquery
  10. layui
  11. vue
  12. react
  13. angular
    涉及到的通用软件:
    一、服务器
  14. apache
  15. nginx
  16. node.js
    二、项目管理软件
  17. svn
  18. git
    三、其他管理软件
  19. ftp
    以上工具及供参考不需要完全了解,标红的为重点掌握内容。具体可以自行百度!
    一个标准的开发项目是什么样子的?
  20. 确定需求:需求方(老板)提出需求(做什么)
  21. 分析需求:产品经理确定分析老板的需求,并绘制出相应的原型图和高保真(怎么做)
  22. 确定产品:老板确认完产品并将产品原型图交给UI设计师
  23. 画出界面:UI设计师做出产品交给前端
  24. 开发计划:开发经理确认开发流程并制定相应的开发计划
  25. 完成前端:根据UI提供的页面完成前端样式
  26. 数据渲染:根据后台提供的接口完成数据渲染
  27. 测试程序:测试产品并进行灰度测试
  28. 通过上线:测试通过,完成全部上线
    本教程约定咱们对html css js有基础的了解!如果您完全不了解,推荐您先看菜鸟教程或者w3cschool的基础教程!
    为什么是uniapp?
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。目前uniapp已经支持全平台开发!从此一套代码,开发N端不是梦!
    快速上手
    uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。并且支付宝小程序官方开发编辑器也支持咱们的uniapp开发!大家可以去uniapp的官方查看相应的文档。传送链接
    注意事项:页面样式与布局
    结尾
    大家可以通过编辑器创建一个属于自己的uniapp,明天我们正式开始讲解如何通过uniapp实现支付宝小程序并使用相应的组件。
    如果您有任何疑问,欢迎给我留言,我会第一时间为大家解答!
    最后,如果你需要开发网站,小程序,公众号等产品,欢迎和我们联系。
继续阅读 »

前言:
本文章全文918个字,阅读需要10分钟!如果您觉得本文章对您有用欢迎给我点赞留言转发。
大家好,我是归来!从今天开始,我将给大家分享开发支付宝小程序的全过程!通过我们的实际项目开发,给大家讲解如何从0到1开发一款属于自己的小程序!当然,开发一款小程序一定不只是涉及到前端这一点点知识。我们本次分享只针对前端开发,后面关于后端开发的过程我们在做另外解答!那我们先进入今天的正题。
正题:
一个公司前端开发中到底需要用到哪些软件呢?
开发工具:

  1. visual studio code
  2. Hbuilder(国内精品)
  3. 各种小程序开发工具
    开发框架:
    一、样式框架
  4. bootstrap
  5. layui
  6. mui
  7. sui
  8. iconfont(阿里免费图标管理样式)
    二、Javascript框架
  9. jquery
  10. layui
  11. vue
  12. react
  13. angular
    涉及到的通用软件:
    一、服务器
  14. apache
  15. nginx
  16. node.js
    二、项目管理软件
  17. svn
  18. git
    三、其他管理软件
  19. ftp
    以上工具及供参考不需要完全了解,标红的为重点掌握内容。具体可以自行百度!
    一个标准的开发项目是什么样子的?
  20. 确定需求:需求方(老板)提出需求(做什么)
  21. 分析需求:产品经理确定分析老板的需求,并绘制出相应的原型图和高保真(怎么做)
  22. 确定产品:老板确认完产品并将产品原型图交给UI设计师
  23. 画出界面:UI设计师做出产品交给前端
  24. 开发计划:开发经理确认开发流程并制定相应的开发计划
  25. 完成前端:根据UI提供的页面完成前端样式
  26. 数据渲染:根据后台提供的接口完成数据渲染
  27. 测试程序:测试产品并进行灰度测试
  28. 通过上线:测试通过,完成全部上线
    本教程约定咱们对html css js有基础的了解!如果您完全不了解,推荐您先看菜鸟教程或者w3cschool的基础教程!
    为什么是uniapp?
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。目前uniapp已经支持全平台开发!从此一套代码,开发N端不是梦!
    快速上手
    uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。并且支付宝小程序官方开发编辑器也支持咱们的uniapp开发!大家可以去uniapp的官方查看相应的文档。传送链接
    注意事项:页面样式与布局
    结尾
    大家可以通过编辑器创建一个属于自己的uniapp,明天我们正式开始讲解如何通过uniapp实现支付宝小程序并使用相应的组件。
    如果您有任何疑问,欢迎给我留言,我会第一时间为大家解答!
    最后,如果你需要开发网站,小程序,公众号等产品,欢迎和我们联系。
收起阅读 »

uniapp优点

uniapp

本应用使用uni-app混合开发平台进行开发。uni-app在跨平台的过程中,不牺牲平台特色,不限制平台的能力使用;
uni-app打包成App后,支持webview渲染和weex原生渲染这2种引擎,可以任由开发者切换使用。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序、快应用等多个平台。
在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。
uni-app支持原生代码混写和原生sdk集成,是体验更好的Hybrid框架,加载新页面速度更快,App端支持weex原生渲染,可支撑更流畅的用户体验。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

继续阅读 »

本应用使用uni-app混合开发平台进行开发。uni-app在跨平台的过程中,不牺牲平台特色,不限制平台的能力使用;
uni-app打包成App后,支持webview渲染和weex原生渲染这2种引擎,可以任由开发者切换使用。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序、快应用等多个平台。
在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。
uni-app支持原生代码混写和原生sdk集成,是体验更好的Hybrid框架,加载新页面速度更快,App端支持weex原生渲染,可支撑更流畅的用户体验。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

收起阅读 »

uni小程序拉流

uniapp
可直接使用 video 组件  
https://uniapp.dcloud.io/component/video
可直接使用 video 组件  
https://uniapp.dcloud.io/component/video

uni-app中蓝牙开发

研究了一个星期的蓝牙下发和上传协议类似68 12 AA AA AA AA AA AA AA 01 90 4F 10 00 00 00 00 00 00 00 00 00 01 00 00 00 00 00 00 00 00 11 16给硬件设备,并且接收蓝牙设备上传的回应数据

如果需要的可以扣扣联系我,没时间写文档。后边会补上,希望可以帮上像我当时那么无助的你

继续阅读 »

研究了一个星期的蓝牙下发和上传协议类似68 12 AA AA AA AA AA AA AA 01 90 4F 10 00 00 00 00 00 00 00 00 00 01 00 00 00 00 00 00 00 00 11 16给硬件设备,并且接收蓝牙设备上传的回应数据

如果需要的可以扣扣联系我,没时间写文档。后边会补上,希望可以帮上像我当时那么无助的你

收起阅读 »

请问能否单个问题付费咨询

关于官方云打包闪退的问题,没有一个官方愿意来协助处理。
我想咨询下怎么可以联系到官方人员?
从8月份我发了三条帖子全部石沉大海,不出意外这条也是。那么我想问下社区的存在到底有什么意义。

关于官方云打包闪退的问题,没有一个官方愿意来协助处理。
我想咨询下怎么可以联系到官方人员?
从8月份我发了三条帖子全部石沉大海,不出意外这条也是。那么我想问下社区的存在到底有什么意义。

微信组件,H5跳转小程序和APP的wx-open-launch-weapp,该组件报错没用注解错误原因

uniapp

踩坑之后发现其实不是组件问题,是真机和开发工具问题,微信还没在开发工具做兼容,毕竟这个组件还比较新,所以开发工具会报错,真机就不会,只是样式会乱,所以需要把样式写在里面。其实你使用v-html和直接使用组件都是一样的效果的,都可以,我是使用vue开发的,所以也是适用uniapp的,

继续阅读 »

踩坑之后发现其实不是组件问题,是真机和开发工具问题,微信还没在开发工具做兼容,毕竟这个组件还比较新,所以开发工具会报错,真机就不会,只是样式会乱,所以需要把样式写在里面。其实你使用v-html和直接使用组件都是一样的效果的,都可以,我是使用vue开发的,所以也是适用uniapp的,

收起阅读 »

uni-app自由拖动按钮

uniapp模板

uni-app自由拖动按钮

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下uni-drag-button目录拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <uni-drag-button></uni-drag-button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

继续阅读 »

uni-app自由拖动按钮

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下uni-drag-button目录拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <uni-drag-button></uni-drag-button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="less">  

</style>  
兼容性

uni-app项目中使用都兼容

收起阅读 »

HBX中uniapp项目 使用微信小程序云开发,不使用uniCloud。

开始看了一下uniCloud 的使用,文档倒是很全。但要使用其扩展的client-DB服务,闲麻烦。想直接用微信小程序云开发的话,按下面步骤做就好了!

步骤

1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0

2、创建你自己云函数目录文件。我设置的:
wxcloud/cloudfunctions

3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝(后续你可用创建函数文件就会拷贝了)。 以下是我目前的配置:
const CopyWebpackPlugin = require("copy-webpack-plugin")
const path = require("path")

module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
disableHostCheck: true
},

    // 配置支持 微信小程序的 云开发  
    plugins: [  
        new CopyWebpackPlugin([{  
            from: path.join(__dirname, 'wxcloud/cloudfunctions'),  
            to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env  
                .UNI_PLATFORM, 'wxcloud/cloudfunctions'),  
        }, ]),  
    ]  
}  

}

4、按照微信云开发 我的第一个云函数 创建你的hbx中的云函数文件
包含3个文件:config.json、index.js、package.json 。文件具体内容 你可以在微信开发工具里面 右键自己创建一个云函数 看看微信生成的文件内容。

5、HBX写好云函数后(3个文件都需要),编译项目,文件会拷贝到微信开发工具。然后,在微信开发工具里面右键同步你的小程序云函数。前提是你创建了和绑定了云环境。
最后,HBX 里面可以写调用云函数,执行测试就好了!
//初始化你的云环境
wx.cloud.init({
// 小程序云环境ID
env: '****',
traceUser: true
})

 // 测试云函数调用  
  wx.cloud.callFunction({  
        // 云函数名称  
    name: 'test',  
   // 传给云函数的参数  
   data: {},  
   success: function(res) {  
    console.log(res);   
    },  
   fail: console.error  
});  

运行结果,
{errMsg: "cloud.callFunction:ok", result: {…}, requestID: "a3fce32a-0f80-11eb-87f2-5254001c5def"}

总结:配置了一个编译时拷贝云函数目录到微信开发目录而已; 其他云开发环境设置等在微信小程序云开发里设置就完事儿了。代码编写可以在HBX 里面完成。

继续阅读 »

开始看了一下uniCloud 的使用,文档倒是很全。但要使用其扩展的client-DB服务,闲麻烦。想直接用微信小程序云开发的话,按下面步骤做就好了!

步骤

1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0

2、创建你自己云函数目录文件。我设置的:
wxcloud/cloudfunctions

3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝(后续你可用创建函数文件就会拷贝了)。 以下是我目前的配置:
const CopyWebpackPlugin = require("copy-webpack-plugin")
const path = require("path")

module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
disableHostCheck: true
},

    // 配置支持 微信小程序的 云开发  
    plugins: [  
        new CopyWebpackPlugin([{  
            from: path.join(__dirname, 'wxcloud/cloudfunctions'),  
            to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env  
                .UNI_PLATFORM, 'wxcloud/cloudfunctions'),  
        }, ]),  
    ]  
}  

}

4、按照微信云开发 我的第一个云函数 创建你的hbx中的云函数文件
包含3个文件:config.json、index.js、package.json 。文件具体内容 你可以在微信开发工具里面 右键自己创建一个云函数 看看微信生成的文件内容。

5、HBX写好云函数后(3个文件都需要),编译项目,文件会拷贝到微信开发工具。然后,在微信开发工具里面右键同步你的小程序云函数。前提是你创建了和绑定了云环境。
最后,HBX 里面可以写调用云函数,执行测试就好了!
//初始化你的云环境
wx.cloud.init({
// 小程序云环境ID
env: '****',
traceUser: true
})

 // 测试云函数调用  
  wx.cloud.callFunction({  
        // 云函数名称  
    name: 'test',  
   // 传给云函数的参数  
   data: {},  
   success: function(res) {  
    console.log(res);   
    },  
   fail: console.error  
});  

运行结果,
{errMsg: "cloud.callFunction:ok", result: {…}, requestID: "a3fce32a-0f80-11eb-87f2-5254001c5def"}

总结:配置了一个编译时拷贝云函数目录到微信开发目录而已; 其他云开发环境设置等在微信小程序云开发里设置就完事儿了。代码编写可以在HBX 里面完成。

收起阅读 »

自学编程应该去哪里?

自学编程首先 JSRUN

JSRUN 是一个强大功能的在线编辑器,更是一个编程学习网站

jsrun 强大的学习网站,更是强大的编辑器

JSRUN是支持在手机或平板上编写代码的编辑器,可以在线运行Node.js、PHP、Java、C语言、C++、Python、Go语言、Kotlin、Rust、Dart、R语言、C#、Ruby、objc、F#、VB.NET、Swift、clojure、Groovy、Lua、Pascal、Perl、Shell、Erlang、Scala、Haskell、Nim、Lisp、OCaml、Racket 30种编程语言。

同时也有以上三十多种编程语言全套教程,更有十多种开发框架教程,JSRUN  为大家提供了免费学习编程的机会

JSRUN配置高性能服务器来运行代码,希望能和闪电一样快速。同时JSRUN支持vue.js/angular.js的在线运行编辑器 、手机端js编辑器 js在线运行工具, 支持babel进行ES6开发 。

JSRUN拥有功能强大的HTML在线运行编辑器、JS在线运行编辑器、CSS在线运行编辑器 , 目前已经有3万多工程师在JSRUN留下了优秀的开源代码,他们的分享是您前端开发和学习的宝藏, 可以免费保存、分享js源码,提供Embed服务 , 独创的实时多屏预览开发,JSRUN成倍提高开发调试效率,比jsfiddle/codepen更强大。

继续阅读 »

自学编程首先 JSRUN

JSRUN 是一个强大功能的在线编辑器,更是一个编程学习网站

jsrun 强大的学习网站,更是强大的编辑器

JSRUN是支持在手机或平板上编写代码的编辑器,可以在线运行Node.js、PHP、Java、C语言、C++、Python、Go语言、Kotlin、Rust、Dart、R语言、C#、Ruby、objc、F#、VB.NET、Swift、clojure、Groovy、Lua、Pascal、Perl、Shell、Erlang、Scala、Haskell、Nim、Lisp、OCaml、Racket 30种编程语言。

同时也有以上三十多种编程语言全套教程,更有十多种开发框架教程,JSRUN  为大家提供了免费学习编程的机会

JSRUN配置高性能服务器来运行代码,希望能和闪电一样快速。同时JSRUN支持vue.js/angular.js的在线运行编辑器 、手机端js编辑器 js在线运行工具, 支持babel进行ES6开发 。

JSRUN拥有功能强大的HTML在线运行编辑器、JS在线运行编辑器、CSS在线运行编辑器 , 目前已经有3万多工程师在JSRUN留下了优秀的开源代码,他们的分享是您前端开发和学习的宝藏, 可以免费保存、分享js源码,提供Embed服务 , 独创的实时多屏预览开发,JSRUN成倍提高开发调试效率,比jsfiddle/codepen更强大。

收起阅读 »