.

杭州app开发

  • 最新新闻
  • 安卓手机app开发用什么软件_app开发_大鱼科技
    搅局者来了，他叫小程序（微信、支付宝），也叫直达服务（小米）。江湖的玩法变了。 右下角的墨迹天气，是工具类App里的老炮，用户每天开一次、每次瞅一眼的打开方式，让他很头疼。「这怎么卖广告？」 为了挣钱，他在【天气】下面放了一坨新闻，还搞了个【时景】的UGC体系，提升停留时长。又在【我】的页面放了一堆广告入口。
  • 制作手机app大概费用多少钱_app开发_大鱼科技
    有时为了突出名称的意义，可能会跟品牌不一致，但网民搜索又可能搜索不到，这时关键字优化就很重要了，核心优化点在于：内容描述中必须包含核心关键字，并获得较好排名，如搜索『简历』，你的简历相关的小程序是否比较靠前。
  • 开发一个app需要多少钱费用_app开发_大鱼科技
    微信的表情雨让中国人的社交充满了人情味儿。当你在对话框输入“么么哒”或者“想你了”，聊天页面会掉下相应的表情雨，成为大多情侣互传情愫的标准动作。中国传统情人节日“七夕节”已至，情侣们在微信“秀恩爱”的方式又多了一种——黄金红包。
  • 什么是小程序_小程序开发需要多少钱_app开发_大鱼科技
    什么是小程序：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时随地可用，但又无需安装卸载。
  • 看牌器 透视在哪里买_app开发_大鱼科技
    这个微信小程序的创意始于2012年，当时仅仅开发了Win平台桌面应用，随着移动互联网发展，开发技术栈难度降低
  • 做一个平台app需要多少钱_app开发_大鱼科技
    访问次数：昨日访问小程序内所有页面总次数，多个页面之间的跳转、同一页面的重复访问计为多次访问。 访问人数：昨日访问小程序内所有页面的总用户数，同一用户多次访问不重复计。 新访问用户数：首次访问小程序页面的用户数，同一用户多次访问不重复计。
  • 一天能赚2万的黑方法_app开发_大鱼科技
    没深思小程序最近一个月内更新7次背后是微信内部前所未有的力度在支持小程序（公众号都不曾有此殊遇），特别是微信刚公布2017年Q1月活账号破9.38亿。面对如此巨大的流量洼地，我们如何借助小程序来低成本/0成本获取用户？
  • 网赌破解器哪里下载_app开发_大鱼科技
    小程序定位 对于公司而言，小程序究竟是一个什么产品定位？以目前的大环境而言，无非就是几个关键点： 蹭一波热点，吸引眼球，做小程序这件事情本身就是一个吸引眼球的事情； 延伸产品线，对已有产品线做一个开辟，确保整个线的完整性； 借助小程序，赶上这趟车，营销导流；
  • 定制一款app大概需要多少钱_app开发_大鱼科技
    很多人不禁要对此举的意义发问：以微信的算法而出的搜索结果，岂不是严重遏制了新生小程序的后来者居上？这样即使定义了关键词，对推广而言并没有实质性的意义？微信官方自然也想到了与之相辅相成的策略，我们甚至可以认为后来的这步棋才是微信的本来目的。那就是于6月中旬首次出现于人们视野中的「搜索关键词广告」
  • 软件外包公司_app开发_大鱼科技
    代码的复杂度是评估一个项目的重要标准之一。较低的复杂度既能减少项目的维护成本，又能避免一些不可控问题的出现。然而在日常的开发中却没有一个明确的标准去衡量代码结构的复杂程度，大家只能凭着经验去评估代码结构的复杂程度，比如，代码的程度、结构分支的多寡等等。当前代码的复杂度到底是个什么水平？什么时候就需要我们去优化代码结构、降低复杂度？这些问题我们不得而知。 因此，我们需要一个明确的标准去衡量代码的复杂度。
更多
  • 热门新闻
更多
怎样自己开发一款软件_app开发_大鱼科技
时间：2021-01-10 23:57:23
怎样自己开发一款软件_app开发_大鱼科技

 

最近在做一个微信小程序的项目，遇到了不少坑，不得不说微信小程序的官方文档写的真的不怎么样，一开始技术选型的时候也有考虑过第三方框架，mpvue，uniapp等，但是最后考虑了下，还是先了解一下原生小程序比较好，我始终认为一开始就上第三方框架并不是很好。

下面我总结了一些坑点和开发过程中容易遇到的问题。

wxss or less

 

对于写惯了less的开发来书，写wxss实在是效率低下，太煎熬了，对此可以使用vscode插件 easy-less 来解决，我是用vscode来写代码，微信开发工具只作预览。

网络请求

 

wx.request是小程序的网络请求方法，默认情况下，我们希望success是在服务器响应的状态码在2xx的时候触发，实际上不是，只要网络请求成功发出了，success方法就会触发，比如500状态码也会触发success，所以fail也只在网络请求没有发出的情况下触发，所以你必须在success重复写判断逻辑,而且也不能用promise，所以有必要封装一下

// 封装前

wx.request({

  url: 'test.php', //仅为示例，并非真实的接口地址

  data: {

    x: '',

    y: ''

  },

  header: {

    'content-type': 'application/json' // 默认值

  },

  success (res) {

    // 假设服务器的响应体是{success: true, data: 123}

    if (res.statusCode === 2xx) {

        fn(res.data.data)

    } else {

        wx.showToast({            icon: 'none',            title: res.data.message || '网络异常',            duration: 1500        })

    }

  },

  fail (res) {

    console.log(res);

  }

})



// 封装后

// request.js

module.exports = function ({url, data, method}) {    const app = getApp();    return new Promise((resolve, reject) => {        wx.request({            method: method,            url: `${app.globalData.apiUrl}/${url}`,            data: data,            header: {                token: app.globalData.token            },            success: function (res) {                if (res.statusCode === 200) {                    const data = res.data.data;                    resolve(data);                } else if (res.statusCode === 401) {

                    // 登录失效,包含业务逻辑，根据需求添加

                    wx.setStorageSync('token', null); // 清除token                                        app.globalData.token = null;                    wx.setStorageSync('userInfo', {}); // 清除用户数据                    app.globalData.userInfo = {};                    wx.switchTab({                        url: '/pages/user/user'                    });                    reject(res.data);                } else if (res.statusCode >= 500) {                    wx.showToast({                        icon: 'none',                        title: res.data.message || '网络异常',                        duration: 1500                    });                    reject(res.data);                }            },            fail: function () {                wx.showToast({                    icon: 'none',                    title: '网络异常',                    duration: 1500                });            }        });    })}



// app.js

const request = require('./utils/request.js');App({    onLaunch: function () {        this.request = request;    },    globalData: {        token: wx.getStorageSync('token'),        userInfo: wx.getStorageSync('userInfo'),        apiUrl: 'http://localhost:3300/api/'            }})// index.js

const app = getApp();app.request({

   method: 'GET',   url: '/test'}).then(res => {    // do something});复制代码

Promise finally

 

因为在某些接口请求前会加loading，防止多次点击，然后在接口的finally中取消loading即可，在开发工具中，一切正常，但是一到真机调试就会报错，查阅资料发现微信小程序不支持promise finally，太坑了，只能加个 polyfill 

canvas绘图

 

小程序一般都会有分享图片的需求，图片一般都带用户信息和小程序码，这时候就要用到canvas，而原生的canvas是如此难用和坑，所以想使用三方库，一开始试了html2canvas，

html2canvas

它确实很强大，可以直接获取dom绘制，但是微信小程序无法获取dom，引入之后直接报错，thirdScriptError Cannot read property 'document' of undefined TypeError: Cannot read property 'document' of undefined

html2canvas(document.body).then(function(canvas) {

    document.body.appendChild(canvas);

});复制代码

Painter

painter可以使用json数据描述绘图，不用繁琐操作canvas的一大坨函数，方便很多，基本能满足需求了。中间遇到一个小问题，开发工具里，绘图后保存到相册是有头像的，但是发小程序正式包后，真机操作时，绘图的头像就会丢失，一开始以为是painter的兼容问题，后来才发现是因为开发工具是开启了不校验合法域名的，但是线上包会校验合法域名，天真的以为微信自己的头像域名不用添加，结果并不是，微信连自己都不放过，在微信小程序后台添加下合法域名就好了 https://wx.qlogo.cn

获取小程序码

 

微信有3中方式获取小程序码

wxacode.createQRCode

获取小程序二维码，适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制

wxacode.get

获取小程序码，适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制

wxacode.getUnlimited

获取小程序码，适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制

好像没有什么理由不选第三种吧

这3个接口返回的都是图片Buffer，我们需要做下处理，有2种方式

方式1：把图片存到服务器本地或转存到alioss等第三方对象服务器上，最后把地址返回给小程序前端

// 服务器

let readable;

let filePath = xxx; // 自己创建一个存图片的目录

const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`;const result = await axios.post(url, {                scene: `a=${xxx}` // 小程序码带的参数，比如带一个邀请码            }, {                 headers: {                    'Content-Type': 'application/json' // POST 参数需要转成 JSON 字符串，不支持 form 表单提交。                },                responseType: 'arraybuffer'             });            readable = result.data;            readable.pipe(fs.createWriteStream(filePath));复制代码

方式2：把Buffer转成base64返回给小程序前端，前端在转成图片存到小程序本地

// 服务器

const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`;            const result = await axios.post(url, {                scene: `a=${xxx}` // 小程序码带的参数，比如带一个邀请码            }, {                 headers: {                    'Content-Type': 'application/json' // POST 参数需要转成 JSON 字符串，不支持 form 表单提交。                },                responseType: 'arraybuffer'             });            const base64 = Buffer.from(result.data).toString('base64');

            // 返回前端            res.send({                success: true,                data: `data:image/jpg;base64,${base64}`            });



// 小程序前端

// base64src.js base64转图片存到小程序临时目录中

const fsm = wx.getFileSystemManager();const FILE_BASE_NAME = 'qrcode_base64src';const base64src = function(base64data) {  return new Promise((resolve, reject) => {    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];    if (!format) {      reject(new Error('ERROR_BASE64SRC_PARSE'));    }    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;    const buffer = wx.base64ToArrayBuffer(bodyData);    fsm.writeFile({      filePath,      data: buffer,      encoding: 'binary',      success() {        resolve(filePath);      },      fail() {        reject(new Error('ERROR_BASE64SRC_WRITE'));      },    });  });};module.exports = base64src;// index.js

let base64Data = xxx; // 服务器返回的base64数据base64src(base64Data).then((src) => {                wx.getImageInfo({                    src: src,                    success: function (r) {                        console.log(r.path); // 图片本地路径                    },                    fail: function (r) {                        console.log(r);                    }                });            });



复制代码

自定义组件 behavior

 

有时候某些自定义组件会有大部分的相似功能，小部分差异，这时候可以使用behavior封装共同的属性和方法等，类似vue中的mixins。

小程序开发