WeChat applet and page wepy framework layout application case sharing

My personal ethics are not deep, so please forgive me if there are any flaws. I will continue to learn and update more valuable articles to share with everyone. I hope everyone can point out and correct them. Let's learn and make progress together! This article is about WeChat applet learning and wepy framework application.

WeChat mini program is an application that does not require downloading and installation. In China, its popularity in corporate promotion and its use and popularity in the past two years are due to its preparation. The popularity and increasing attention by enterprises have also formed the mastery of the development of small programs by our developers; the specific popularity of it will not be discussed here, and what we focus on is the development details. So today we will analyze and understand this mini program step by step:
1. Development preparations

1. First log in to the WeChat public platform https://mp.weixin.qq.com and select the mini program program (if you have not registered yet, you need to register a public account), after logging in

"Settings"-"Developer Settings", check the AppID of the WeChat applet

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

2. Download and develop Tool

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

3. New project

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

2. Understanding the editor architecture layout

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

Each applet page is composed of four different suffix files with the same name in the same path The composition, such as: index.js, index.wxml, index.wxss, index.json. The file with the suffix

is a script file, the file with the suffix .json is the configuration file, the file with the suffix .wxss is the style sheet file, which is equivalent to the css file in html,

.wxml The file with the suffix is ​​a page structure file.

app.js is the global function js of the page. You can call global data (gloableData) and its page methods in the projects in pages.
The styles in app.wxss are the global styles of the page, but they take precedence. The level is not as high as the priority defined by the local page.

The setting items of windows in the app.json file are also global settings. The pages array defines new pages. The first one is the display page for entering the mini program. The following app.json is:

{
     [

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

      'pages/logs'

     ]
}

3. Develop common components and tag sharing

WeChat mini program editors can only use tags provided by themselves;
view, block tags are block-level elements similar to p, The text tag is a row-level element similar to span. These three tags are used most frequently.
In addition to input and button in H5, form elements include switch, slider, and picker. For details, please see the component API.
The page jump tag navigator is used to jump between project pages, but it is not a link because it cannot jump to the web page (the jump uses the webview tag )
eg:
But in the project, I mostly use event clicks to jump. The advantage is that it is easier to make a judgment before jumping

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

There is also a commonly used tag: The difference between image tags and h5 is that the image tags in the mini program are all spelled out as image, and are double tags

4. Development of common instructions and event sharing

The same design pattern as vue MVVM data rendering {{ data}}
Determine wx:if, wx:else. eg:
Loop wx:for .
Mini program event binding bindtap, catchtap
Get the cycle sequence number data-x

<!--在wxml中-->
<view class="contents">
    <button catchtap="choose" wx:if="{{showBtn}}">选择</button>
    <text wx:for="{{arrList}}" wx:key="{{index}}" data-i="{{index}}" data-type="{{item}}" bindtap="selectTab" >{{item}}</text>
</view>

//对应的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(){//页面显示时
 
  }

5. Local image selection, file upload, server-side data interaction and file processing

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

    文件上传 wx.uploadFile(OBJECT)

    数据请求 wx.request()

6. Local data storage operation

   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

Introduction to the installation and use of wepy framework

Link address https://tencent.github.io/wep...

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

组件名后缀 .wpy 

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

1. Introduction to wepy page and component structure

wepy page and component editing layout are the same three structures

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

page page example export default class MyPage extends wepy.page { }

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

Component component instance export default class MyPage extends wepy.component { }

Definition of methods The bind and catch events of the page wxml tag can only be defined in the methods attribute in WePY

Reference of the component Pay attention to the reference path registered in components and use

loop components in the template repeat

    <!--wepy结构-->
    <style type="scss">
    </style>
    <template>
        <button bindtap="showFirstComponent">按钮</button>
        <view v-if="show">
         <DemoCom></DemoCom>   <!--使用组件-->
        </view>
       <repeat for="{{arr}}" key="index">  <!--循环组件-->
         <DemoCom :passdata="item" /> <!--传值-->
       <repeat>
    </template> 
    <script>
      import wepy from &#39;wepy&#39;
      import DemoComponent from &#39;../components/demoComponent&#39; //比如说这里通过路径引人了demoComponent组件
      export default class pageDemo extends wepy.page {
     
        config = {
               &#39;navigationBarTitleText&#39;: &#39;页面标题&#39;,
               &#39;navigationBarTextStyle&#39;: &#39;#FFFFFF&#39;, //头部背景色
               &#39;navigationBarBackgroundColor&#39;: &#39;#0386FF&#39; //头部字体颜色
             };
        components = { //注册引入的组件
               DemoCom:DemoComponent
            };
        data = {     
            show:true,
            arr:[
                {name:&#39;aa&#39;,age:&#39;16&#39;},
                {name:&#39;bb&#39;,age:&#39;17&#39;},
                {name:&#39;cc&#39;,age:&#39;c18&#39;}
              ]
        };
     
        methods = {
          showFirstComponent(){ //bindtap里面的事件
                this.show=!this.show; //在这里data数据的设置、获取与vueJS里面的设置、获取一样
           }
        };
        onLoad(){
     
        };
        onShow(){
     
        }
    </script>

Look at the page component registration in app.wpy

<style> 
  .mainBgcolor{ /*全局样式全局用*/
   background:#ffffff;
   }
</style>
 
<script>
import wepy from &#39;wepy&#39;
import &#39;wepy-async-function&#39;
import { aldstat } from &#39;./utils/ald-stat&#39;
export default class extends wepy.app {
 
   config={
     pages: [ //这里注册的全是pages里面建立的pages.wpy组件，页面之间跳转
      &#39;pages/index&#39;,
      &#39;pages/login&#39;,
      &#39;pages/companyDetailInfo&#39;,
     ],
    window: {
      backgroundTextStyle: &#39;light&#39;,
      navigationBarBackgroundColor: &#39;#fff&#39;,
      navigationBarTitleText: &#39;WeChat&#39;,
      navigationBarTextStyle: &#39;black&#39;
    }
  }
 
  globalData = { //全局data 全局用
    userInfo: null
  }
</script>

2. Transfer between wepy page components Value and communication

There are three ways to communicate and pass values ​​between wepy components:
Parent component=>child component (props,$broadcast), the page events object is the relay
Child component= >Parent component ($emit,$invoke), the page events object is a relay
Child component=>Subcomponent ($invoke), the method in non-methods is a relay, the same applies to passing the parent component to the child component

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

    <!--比如在父组件中-->
    <script>
    import wepy from &#39;wepy&#39;
    import childComponent from &#39;../components/childComponents&#39;
    import footerComponent from &#39;../components/footerComponents&#39;
    export default class extends wepy.app {
        components={
           childComponent:childComponent,
           footerComponent:footerComponent
         }
        data={
           pData:666,
           wantChildData:&#39;&#39;,
           wantFooterData:&#39;&#39;
         };
       events={
          &#39;childData&#39;:function(params){ //接收子组件传过来的值
              this.wantChildData=params;//params就是传过来的888
           },
          &#39;footerData&#39;:function(params){ //接收子组件传过来的值
             this.wantFooterData=params; //params就是传过来的999
           }
       };
        methods={
           sendData(){
              this.$broadcast(&#39;parentData&#39;,this.pData);//向子组件发送pData数据
            }
        }
       onLoad(){
     
        };
       onShow(){
     
       }
       }
    </script> 

     
    <!--比如在子组件childComponents中-->
    <script>
    import wepy from &#39;wepy&#39;
    import footerComponent from &#39;../components/footerComponents&#39;
    export default class extends wepy.app {
        components={
          footerComponent:footerComponent
         };
        data={
           wantParentData:&#39;&#39;,
           cData:888
          };
        events={
          &#39;parentData&#39;:function(params){ //接收父组件传过来的值
                 this.wantParentData=params; //params就是传过来的666
             }
         }
       methods={
           sendData(){
            this.$emit(&#39;childData&#39;,cData);//向父组件发送cData数据
          },
          sendFooterData(){
            this.$invoke(&#39;footerComponent&#39;,FooterMethod,{cDatas:this.cData}); //footerComponent指要往哪个组件传值，
                                                                             //FooterMethod是footerComponent里定义的方法(注意不是methods里面的)，
                                                                             //最后的对象是要传递的东西，也可以是某个值
          }
     }
      onLoad(){
     
      }
      onShow(){
     
       }
      }
    </script> 

    <!--比如在子组件footerComponents中-->
    <script>
    import wepy from &#39;wepy&#39;
    import childComponent from &#39;./childComponents&#39;
     export default class extends wepy.app {
         components={
            childComponent:childComponent
          }
        data={
           wantParentData:&#39;&#39;,
           wantCdata:&#39;&#39;,
           fData:999
          };
        events={
          &#39;parentData&#39;:function(params){ //接收父组件传过来的值
                 this.wantParentData=params; //params就是传过来的666
             }
         }
       methods={
           sendData(){
            this.$emit(&#39;footerData&#39;,fData);//向父组件发送fData数据
          }
        }
       onLoad(){
     
        }
       onShow(){
     
        }
       FooterMethod(params){//params就是接收到的参数对象
           this.wantCdata=params.cDatas //这里的params.cData就是从childComponent组件里传过来的888
       }
      }
    </script>

The props method is the same as the props in vueJS, but it is divided into static value passing and dynamic value passing

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

props动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

注意：下文示例中的twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。这是与Vue不一致的地方，而这里之所以仍然使用twoWay，只是为了尽可能保持与Vue在标识符命名上的一致性。

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

OK，至此咱们的微信小程序的简单使用及了解算是分享完了apache php mysql

相关文章：

详解微信小程序框架详解及实例应用

微信小程序 框架详解及实例应用

相关视频：

微信小程序开发实战视频教程

The above is the detailed content of WeChat applet and page wepy framework layout application case sharing. For more information, please follow other related articles on the PHP Chinese website!