您当前的位置: 首页 > 知识百科 > 开发微信小程序技术难点及解决办法

开发微信小程序技术难点及解决办法

时间:2023-07-01 14:05 阅读数:92 人阅读 分类:知识百科

  已经有很多小程序开发者反映,选择小程序开发真的是一件折磨人的事情,因为开发步骤和开发代码都太复杂了,稍不注意就会出错,导致开发出来的小程序功能不完善或者根本没法使用。那么开发微信小程序技术难点有哪些呢?要怎么解决这些难点呢?

  以下是小编在开发过程中遇到的难点和解决的小技巧,记录以下:

  1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task.

  截图如下:

  解决办法:需要在每个XXX.js文件中加入page(),以用来生成一个页面实例对象.

  Page({

  });

  有时就算你在每个js文件中都写了基本的page()代码,还是会保这个错误,这时需要注意app.json里面的路由填写顺序,如一般二级界面就写在一级界面的下面,千万别写在末尾.如:

  正确写法:

  错误写法:

  同时,也得注意默认自带index和logs这两个,通常一般都是放在末尾,有时我放在中间部分,下方的部分页面也会出现.有时出现这个错误完全只是开发工具的问题,重启下就好了(公测第一版的开发工具bug太多).

  2.网络请求:对于网络请求也是一个大坑.一如既往,小程序只能使用s,除非使用破解之后的开发工具,并且不能在真机运行

  对于网络请求,最常使用的是POST请求,但是这就是微信小程序最大的难点所在.小程序开发文档及其简陋,连小程序开发入门都不够的.对于post请求,我们需要把data改为formData传过去才行.

  首先在Utils文件夹中的Util.js文件文写出以下代码,用来把参数转为formData

  //参数data转formData

  function json2Form(json) {

  var str = [];

  for(var p in json){

  str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));

  }

  return str.join("&");

  }

  module.exports.json2Form = json2Form

  然后在post请求的文件中,引入该Util.js文件

  1var Util = require( '../../../utils/util');

  接下来就是修改request方法:

  //调用应用实例的方法获取全局数据

  wx.request({

  url: '.pintasty/productdetail/findproductdetailbyid',

  method: 'POST',

  header: {

  "content-type": "application/x--form-urlencoded" //这里的改,一开始Content-Type可以,现在只能使用content-type

  },

  data: Util.json2Form( { product_id:"P-2c22ad5be9b24a5da0cd5d8594e8ec32",uploadImgId : "UU-60a0e559b0a0421d892232fc75ee9d17" }), //这里得改,参数只能这样传入

  success: function (res) {

  console.log('酒品详情' + JSON.stringify(res))

  that.setData({

  wineData:res.data.data,

  bigPicture:res.data.data.bigPicture

  })

  },

  fail: function (res) {

  console.log('失败' + JSON.stringify(res))

  },

  })

  然后就行了,因为我的是破解版开发工具,所以可以.

  3.在XXX.js文件中获取屏幕的宽高.

  主要根据小程序提供的getSystemInfo()方法,该方法可以获取到设备的常用信息,如手机型号.设备像素比.屏幕宽高等等.最常用的就是屏幕宽高了

  //获取屏幕宽度

  var screenWidth = wx.getSystemInfo({

  success: function (res) {

  screenWidth = res.windowWidth

  }

  })

  //获取屏幕高度

  var screenHeight = wx.getSystemInfo({

  success: function (res) {

  screenHeight = res.windowHeight

  }

  })

  Page({

  onLoad:function(){

  console.log('屏幕高度:'+screenHeight)

  console.log('屏幕宽度:'+screenWidth)

  }

  })

  看完了小编的亲身开发实例,大家是不是已经了解了开发微信小程序技术难点在哪了吗?具体的解决办法也在文中了,相信大家看完之后,开发小程序的技术能够提升一个档次了吧,微信小程序商店里面还有更多开发小程序的教程,大家可以去搜索关注哦。

  

  如何掌握微信小程序开发技术

  开发微信小程序难吗?微信小程序开发的技术难度

  个人如何开发小程序?