美文网首页
VX小程序

VX小程序

作者: Yaoxue9 | 来源:发表于2018-06-05 21:53 被阅读58次

    微信小程序
    小程序是什么:是一种不需要下载安装即可使用的应用,触手可及、用完即走的应用。
    2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线。
    小程序开发
    参考网址:

          1. https://developers.weixin.qq.com/miniprogram/dev/index.html
          2.  https://mp.weixin.qq.com/
          3.  
    

    一、 注册小程序

    注册网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

    注意!!! 注册时的邮箱一定是没有在腾讯产品中使用过的
    二、 如何开发小程序?

    1. 下载微信开发者工具

    链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    新建小程序项目

    项目路径,appid,项目名称

    项目目录结构

    app.json: app.json 是对当前小程序的全局配置

        常用属性:pages,window,tabbar属性
    

    app.js: 小程序的入口文件 相当于vue的main.js

    App({    })
    

    app.wxss: 是小程序的全局样式 相当于reset.css
    project.config.json 编辑器的配置(或称项目风格配置)

    untils:存放公共工具方法的目录
    pages:存入项目页面的目录(开发目录)

        index:
    
                index.js:页面的js逻辑
    
                     Page({  })
    
                index.json:页面的配置
    
                         页面json只能使用window属性的中的key
              例如:
              
                        {
                          "window":{
                            "navigationBarBackgroundColor": "#ffffff",
                            "navigationBarTextStyle": "black",
                            "navigationBarTitleText": "微信接口功能演示",
                            "backgroundColor": "#eeeeee",
                            "backgroundTextStyle": "light"
                          }
                        }
    
    
                index.wxml :页面的html
                index.wxss:页面的css
    

    4.小程序的条件控制:

     wx:if 相当于vue中的v-if
     hidden: 相当于vue中的v-show
    

    两者适用场景:wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
    5.小程序遍历 wx:for

    <view wx:for="{{ 要遍历的数组}}" wx:for-index="索引名" wx:for-item="遍历的项">
      {{idx}}: {{itemName.message}}
    </view>
    
    为了提高遍历性能,添加wx:key="*this"
    

    block 相当于vuef中的template
    小程序如何绑定事件
    绑定事件:是连接wxml(视图)和js逻辑的桥梁

       <button bindtap="方法名">登录</button>
    

    事件传值:通过给标签添加自定义属性进行传值

    例如: <button bindtap="go data-name="1512A高薪" data-salary="30k">登录</button>

    js中的如何接收值:
    //点击按钮触发方法
    go(e) {

               // e.currentTarget.dataset
          },
    

    数据如何同步到视图: this.setData()

           go(e) {
                this.setData({
                  name:"1512A",
                })
         
           },
    

    如何获取后端数据: wx.request,不能用于本地json调用,必须得请求线上真实的接口地址

    wx.request({
    url:"接口地址",
    success:function() {
    method:"get",
    data:"要传递的参数",
    dataType:'json'
    }
    })

    小程序如何跳转

    有两种方式:
    标签方式:
    js方式:

    11.动态改标题

    wx.setNavigationBarTitle({
    title: ${options.name}详情
    })

    相关文章

      网友评论

          本文标题:VX小程序

          本文链接:https://www.haomeiwen.com/subject/stzmsftx.html