微信小程序开发（踩坑篇）

最新推荐文章于 2025-06-30 20:53:18 发布

原创最新推荐文章于 2025-06-30 20:53:18 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #小程序前端

微信小程序专栏收录该内容

2 篇文章

订阅专栏

公司最近打算做一个金融项目，分配让我开始学习微信小程序开发。今天是第二天，碰到一些奇奇怪怪的问题，记录下。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

不记得几号写的了

1、页面图片要与该页面放置在一个文件夹中，否则无法读取到。

原先在项目下建了一个image文件夹，打算专门用来放整个项目的图片的，同级的有个index文件夹。

当我需要在index.wxml里引入image文件夹里的图片时，无论路径怎么填，图片都无法显示。后台显示说无法获取图片。

后来试了在index文件夹下新建了一个image文件夹，然后把该页面需要的图片拖进去，在写对路径，就成功了。

2、在框架配置文件app.json中设置所有页面的背景色不起作用，同时在页面配置文件中设置也不起作用时，可以在框架样式文件app.wxss或页面样式文件中设置。

昨天把所有页面的背景色设置为了#ffffff（白色），今天想改为#f5f8fa，如下：

 "window" : {
    "backgroundColor":"#f5f8fa"
  }

不起效，百度了，换成在app.wxss样式文件里设置了下面的代码，然后就神奇的生效了。

Page {
  background: #f5f8fa;
}

3、在app.js里：wx.request() 向服务器请求数据是AJAX异步数据请求，直接在AJAX请求里设置全局变量是设置不了的，也无法调取这个数据，需要最开始设置var that=this ,然后再AJAX请求里写that.globalData.变量名 = 变量值。且，在单独的页面里申明变量也是无效的，一定要在app.js里申明globalData。

特别注意：wx.request()是AJAX异步数据请求，在这里面用this.globalData设置变量不代表这个this就是指小程序的app（即这个变量不是全局变量），这个变量仍旧是在这个AJAX里的局部变量。此时，需要在最顶部加入var that = this，同时在AJAX里用that替代this。见下面鲜红色的代码。

var that = this;

wx.login({
success: function (res) {
if (res.code) {
//发起网络请求
//向服务器请求数据
wx.request({
url: "https://api.xxxxx.com/",
header: {
'content-type': 
'application/json'
},
success: function(re){
console.log(re);
console.log(re.data.list.goods_list[0].f_price);
that.globalData.price = re.data.list.goods_list[0].f_price;
}
})
console.log("登录成功！");
} else {
console.log('获取用户登录态失败！' + res.errMsg);
}
}
});


然后：
globalData: {
price: 0
}


再接着再当前页面的js文件里调用就可以了：

Page({
data:{
price:''
},
onLoad: function () {
var that = this;
that.setData({price: app.globalData.price})
}
})



=============================================================================================================================================

2017/12/214、使用<navigator>标签/wx.navigateTo/wx.redirectTo不能跳转到放入小程序底部navigationBar里面的页面。我在首页展示了一些产品，放了一个<button>MORE<button>，想让用户点击此按钮时，跳转到全部产品页面。使用了下面三种方法，都无效。


方法一：
<navigator url="../product/product><button>MORE<button></navigator>
方法二：

<button bindtap="gotoProduct">MORE<button>
gotoProduct: function () {
  wx.navigateTo({
    url: "../product/product"
  })
}
方法三：

<button bindtap="gotoProduct">MORE<button>
gotoProduct: function () {
   wx.redirectTo({
       url: "../product/product"
   })
}