-

微信小程序开发(图文教程)

微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信开发者工具下载
在浏览器中输入:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html >> 选择 Windows 64
微信开发者工具安装
双击软件 >> 安装 >> 下一步 >> 成功完成
微信开发者工具配置
app.json(透明顶部标题) >>

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "防伪码查询测试版",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom" 
},
app.json(改顶部标题背景) >>

"window": {    
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "防伪码查询测试版",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
},
app.json(添加底部菜单) >>

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/selectedhome.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "产品展示",
        "iconPath": "/images/product.png",
        "selectedIconPath": "/images/selectedproduct.png"
      },
      {
        "pagePath": "pages/list/list2",
        "text": "联系我们",
        "iconPath": "/images/tel.png",
        "selectedIconPath": "/images/selectedtle.png"
      }
    ]
},
app.wxss(定义全局样式) >>

.fanhuiback{
  position: fixed;
  top:62rpx;
  left:15rpx; 
}
app.js(定义全局变量) >>

globalData: {//定义全局变量     const app = getApp();//获取app变量  app.globalData.httpurl  使用
    userInfo: null,
    httpurl:"https://xiyueta.com/test/web20220813a/"
},
home/home.wxss(定义page的背景颜色) >>

page {
  background-color: #FBE399;
}
home/pageDetail.wxml(界面里添加rich-text) >>

  <rich-text nodes="{{cxid}}" class="ma"></rich-text>
  cxid=<font style='color:red'></font>
home/home.js(加载时用GET方式调用外部程序) >>

  onLoad(options) { 
    // const token=wx.getStorageSync("token");
    // console.log("token",token);
    // console.log("test",app.globalData.httpurl)
    this.loadJson();
  },

  loadJson(){ 
    wx.request({
      url:app.globalData.httpurl+'api/home.asp',
      method:'GET',
      success:(res)=>{
        console.log("home",res)
        // console.log(res.data.foottext)
        this.setData({  
          bg:res.data.bg  
        })
      }
    })
  },
home/home.js(调用扫码) >>

  clickimg1(e) {
    var that = this;
    console.log("home","点击");

    wx.scanCode({
      onlyFromCamera: true,// 只允许从相机扫码
      success(res){
        console.log("扫码成功:"+JSON.stringify(res))
        let url=res.result;
        let nLen=url.indexOf('?cxid=');
        if(nLen!=-1){
          url=url.substr(nLen+6);
        }
        console.log("show",url)
 
        // 扫码成功后  在此处理接下来的逻辑
        that.setData({
          scanCode: res.result
        })
        //跳转
        wx.navigateTo({
          url: "./pageLanguage?cxid="+url
        })

      }
    })

  },

  界面调用 <image src="{{bg}}" mode="widthFix" class="saomiao"></image>
跳转和接受参数 >>

//跳转
        wx.navigateTo({
          url: "./pageLanguage?cxid="+url
        })

//接受
  onLoad(options) {
    this.setData({
      cxid: options.cxid
    })
      
    this.loadJson();
  },
page/pageInfo.wxml(隐藏图片) >>

  <image src="{{img1}}" mode="widthFix" class="imgtop" hidden="{{click1On}}" bindtap='clickAct1'></image>
  <image src="{{img2}}" mode="widthFix" class="imgtop"  hidden="{{click1Off}}" bindtap='clickAct1'></image>
page/pageDetail.wxml(if判断) >>

    <view class="t2" wx:if="{{lan!='en'}}">{{t10}}</view> 
    <view class="t2en" wx:if="{{lan=='en'}}">{{t10}}</view> 
page/pageLanguage.js(网址跳转到小程序接受q参数) >>

  onLoad(options) {
    if (options.q) {
      let qrUrl = decodeURIComponent(options.q)
      this.setData({
        cxid: this.getQueryString(qrUrl, 'cxid')
      })
    } else {
      this.setData({
        cxid: options.cxid
      })
    }
    this.loadJson(this.data.cxid);
  },
  getQueryString(url, name) {
    var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
    var r = url.substr(1).match(reg)
    if (r != null) {
      return r[2]
    }
    return null;
  },