小程序-基础表达篇_忘却_前端开发者

/约定/ 让我们轻装上阵

一个功能页(Page)的开发通常需要四大块:配置、代码、布局、样式。
这四大块承载不同的方面,要独立不混杂,又要整体融合。于是有了以下约定:
每一块 –> 独立的文件、相同的文件名、不同的扩展名。

按约定行事,自动融合。

于是,一个小程序的功能页 Page,就这样形成了。

于是,一个小程序的功能页 Page,就这样形成了。

  • index.json
  • index.js
  • index.wxml
  • index.wxss
  • index.json
  • index.js
  • index.wxml
  • index.wxss
  • 而 app.js,app.json,app.wxss 则作为全局定义。

    再继续来看代码部分
    它少不了这三大块:数据、生命周期、功能过程。
    不需要额外的配置,约定一种结构方式即可。

    再继续来看代码部分

    Page({ data, on阶段, func... })
    

    Page({ data, on阶段, func... })

    再来看四大块中的交互
    通过约定之后,可谓我中有你,你中有我,wxss 定义的名称,wxml 可以根据需要使用,js 定义的数据,wxml 可以灵活呈现,数据变,呈现自动变。

    再来看四大块中的交互

    常用表达

    1.点击事件

    通过 bindtap 属性指定一个功能函数名称即可。以下示例中,{{ msg }} 绑定代码中定义的数据属性 msg,按钮点击事件,执行代码中的 clickMe 功能函数,它改变了 msg 的值,则页面也会相应的呈现新的值。

    {{ msg }}

    <view>{{ msg }}</view>
    <button bindtap="clickMe">点击我</button>
    
    Page({
      data: { msg : null },
      clickMe: function() {
        this.setData({ msg: "Hello World" })
      }
    })
    

    <view>{{ msg }}</view>
    <button bindtap="clickMe">点击我</button>

    Page({
    data: { msg : null },
      clickMe: function() {
        this.setData({ msg: "Hello World" })
      }
    })

    2.页面跳转

    wx.navigateTo({
       url: '../mypage',
    })
    

    wx.navigateTo({
       url: '../mypage',
    })

    当存在参数时,如:
    /mypage?id=123
    可通过 onLoad 里 options 可取得参数,如 options.id

    Page({ 
      onLoad: function (options) {
        console.log(options.id); 
      },
    

    Page({
    onLoad: function (options) {
    console.log(options.id);
    },

    3.获取输入值

    输入控件 bindinput 指定输入事件,在传递的参数(如参数名为 e)中通过 e.detail.value 可以取到值。

    bindinpute.detail.value

    <input id="ipt" bindinput='iptInput'></input> 
    
    iptInput: function(e){
        this.setData({ iptValue : e.detail.value});
    }
    

    <input id="ipt" bindinput='iptInput'></input>

    iptInput: function(e){
        this.setData({ iptValue : e.detail.value});
    }

    4.JSON转换

    stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
    parse(string): 将 JSON 字符串转化成对象,并返回该对象。

    stringify(object)
    parse(string)

    5.web 请求

    普通请求
    在调试阶段,项目可以设置:开发环境不校验安全域名TLS版本与HTTPS证书。这样可以使用 http 做测试,正式环境要求使用 https。

    普通请求

    wx.request({
      url: 'http://.../test.php', 
      data: {
         x: ''  
      },
      header: {
          'content-type': 'application/json'  // 默认值
      },
      success: function(res) {
        console.log(res.data)
      }
    })
    

    wx.request({
      url: 'http://.../test.php',
      data: {
         x: ''
      },
      header: {
          'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data)
      }
    })

    文件上传

    文件上传

    wx.uploadFile({
      url: 'http://.../upload',
      filePath: this.data.fileinfo.path,
      name: 'myfile',
      formData: {
        id: "busiid",
      },
      success: function (resu) {
        console.log(resu);
        wx.showToast({
          title: '请求成功',
        })
      },
      fail: function(err){
        wx.showToast({
          title: '错误' + err.errMsg 
        })
        console.log(err);
      }
    })
    

    wx.uploadFile({
    url: 'http://.../upload',
    filePath: this.data.fileinfo.path,
    name: 'myfile',
    formData: {
    id: "busiid",
    },
    success: function (resu) {
    console.log(resu);
    wx.showToast({
    title: '请求成功',
    })
    },
    fail: function(err){
    wx.showToast({
    title: '错误' + err.errMsg
    })
    console.log(err);
    }
    })

    6.消息提示

    wx.showModal({
      title: '消息',
      content: '您点击了',
      showCancel: false
    })
    
    wx.showToast({
      title: '错误' + err.errMsg 
    })
    

    wx.showModal({
      title: '消息',
      content: '您点击了',
      showCancel: false
    })

    wx.showToast({
    title: '错误' + err.errMsg
    })

    7.引入weui-wxss

    两个步骤
    7.1下载
    https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
    7.2引用
    将weui.wxss 放在与 app.wxss 同一目录下。在app.wxss 中最前边引用即可。

    7.1下载
    https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
    7.2引用

    @import 'weui.wxss';
    

    @import 'weui.wxss';

    文档:https://github.com/Tencent/weui/wiki

    https://github.com/Tencent/weui/wiki

    8.其它

    当异步方法中要更新数据时,不能直接使用 this.setData,此时,可以在异步发起代码前加上 let that = this;,然后使用 that.setData 来操作。

    this.setDatalet that = this;that.setData

    在 app.json 配置 tabBar 可以直接定义底部导航。

    {
      "tabBar": {
        "color": "#ddd",
        "selectedColor": "#3cc51f",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          }, 
          {
            "pagePath": "pages/profile/profile",
            "text": "我的"
          }
        ]
      } 
    }
    

    {
    "tabBar": {
    "color": "#ddd",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
    {
    "pagePath": "pages/index/index",
    "text": "首页"
    },
    {
    "pagePath": "pages/profile/profile",
    "text": "我的"
    }
    ]
    }
    }

    其它组件、模板,WXS(WeiXin Script)参考官方开发文档。

    文档链接

    官方开发文档

    官方开发文档

    自定义组件

    自定义组件

    基础组件的一些例子

    基础组件的一些例子

    » 本文来自:前端开发者 » 《小程序-基础表达篇_忘却_前端开发者》
    » 本文链接地址:https://www.rokub.com/73556.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!