2022微信小程序与页面wepy框架布局应用案例分享

  注：不可直接使用服务号或订阅号的AppID

  下载地址：     https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869

  打开并使用微信扫码登录
   选择创建“小程序项目”
   选择一个要创建项目的文件夹(空文件夹)
   输入获取到的 AppID(可以选择不填，但这样会有很多功能受限制)
   输入你的项目名

 准备就绪后，进入编辑器进行项目编辑。

{
     [

      'pages/index',  //放在了前面

      'pages/logs'

     ]
}

eg:      wx.navigateTo({
                  url:'pages/index?title=navigate'
           })

    选择
    {{item}}

//对应的js中
 data:{
     showBtn:true,
     arrList:['apple','pear','orange']
  },
  choose(){ //选择按钮catchtap的choose事件,catchtap是指点击事件会阻止向上冒泡
     this.setData({ //改变data中的showBtn的值
          showBtn:false
      })
   },
   selectTab(ev){ //列表上bindtap的selectTab事件,bindtap是指点击事件，但不会阻止向上冒泡
       var getAttrType=ev.target.dataset.type;//上面的列表标签里写了data-type，这里就是取到对应上面等于的值
       var index=ev.target.dataset.i;//同样的，上面的列表标签里写了data-i，这里就是取到对应上面等于的值
    }
  onLoad(){//页面加载时
 
   },
  onShow(){//页面显示时
 
  }

    本地图片选择wx.chooseImage(OBJECT)
    图片预览wx.previewImage(OBJECT)

    文件上传 wx.uploadFile(OBJECT)

    数据请求 wx.request()

   wx.setStorageSync
   wx.getStorageSync
   wx.clearStorageSync

//对应的本地图片选择js
 
wx.chooseImage({
    count: 3, // 默认9,假如传张
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths    
        wx.previewImage({  //对应的图片预览
          current: temFilePaths[0], // 当前显示图片的链接
          urls: tempFilePaths||[] // 需要预览的图片http链接列表
        })
       wx.uploadFile({ //对应的图片上传
           url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
           filePath: tempFilePaths[0],
           name:"file",
           formData:{ //上传的同时携带别的参数
              "user":"test"
           }
        success: function(res){
           var data = res.data
            //do something
       }
    })
  }
})

//数据请求js
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {  //注意你在这里上传图片url参数到后台后台是接收不到的，因为上面有专门上传图片的方法
     params1: '' ,
     params2: ''
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     console.log(res.data)
  }
})

//数据储存js
wx.setStorageSync("key","value") //设置要本地存储的key值
wx.getStorageSync("key")  //获取本地存储的key
wx.clearStorageSync("key")  //上出本地存储的key

全局安装或更新WePY命令行工具 npm install wepy-cli -g
在开发目录中生成Demo开发项目  wepy init standard myproject
接下来三步骤与vue一样  
cd myproject
npm  install
wepy build --watch（启动项目）
使用WePY框架后的开发目录结构(主要为src目录的结构，dist目录除外)

组件名后缀 .wpy 

组件页面结构与vue结构一样

   template模板
   script脚本
   style 样式（也可以外部引入）

  注：page组件需在入口模板app.wpy的pages数组里注册后方可进行页面间跳转

    eg：this.$broadcast('parentData',{getData:'aaa'})
       this.$emit(sendChildData,{ getData:'aaa' })
       this.$invoke('Footer','FooterMethod',{invokeData:'aaa'})

 
// child.wpy，静态传值
props = {
    title: String
};
 
onLoad () {
    console.log(this.title); // mytitle
}

// parent.wpy
 
 data = {
    parentTitle: 'p-title'
 };
 
// child.wpy
props = {
    // 静态传值
    title: String,
    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },
    twoWayTitle: {
        type: String,
        default: 'nothing',
        twoWay: true
    }
};
 
onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title
    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}