微信小程序：通过nginx访问本机资源

1.首先将资源都放到对应的文件夹下

2.在app.js里面通过请求获得url

3.显示出来

4.如果想要用真机调试，就要使用内网穿透工具。给自己的内网一个域名，然后通过这个域名来访问本机服务器。

效果图：

 app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    }),
    console.log("app.js请求nginx服务器的文字服务");
    //请求nginx反向代理服务器的文字服务  耗时操作
    wx.request({
      url: 'http://127.0.0.1:8030/text/resources.json',
      success:(resp)=>
      {
          console.log(resp.data);

          //这步还没有执行，页面的onload已经加载执行
          this.globalData.textinfo=resp.data;

      }
    })

  },
  globalData: {
    userInfo: null,
    textinfo:{},
    ipadd:"这边换成你自己内网穿透的地址"
  }
})

app.json

{
  "pages": [
    "pages/one/one",
    "pages/two/two",
 
    "pages/index/index",
    "pages/logs/logs"
  
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

one.js

// pages/one/one.js
let  app  = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgpath1:app.globalData.ipadd+"/img/a1.jpg",
    imgpath2:app.globalData.ipadd+"/img/a2.jpg",
    //文字和代码分离
    //1.统一配置文字资源 
    //2.国际化配置中英文资源切换 
    msg:"",
    texts:{}

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
   setTimeout(() => {

   let  infos  =app.globalData.textinfo;
   this.setData({texts:infos});
     
   }, 1000);

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {


  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

one.json

{
  "usingComponents": {}
}

one.wxml

<!--pages/one/one.wxml-->
<image  src="{{imgpath1}}"></image>
<view>{{texts.one.msg}}</view>
<image  src="{{imgpath2}}"></image>

one.wxss

/* pages/one/one.wxss */