• 小程序开发之小试牛刀


    Ø  简介

    在当今互联网时代,小程序也占有一定市场份额,它的优点也是无可非议的。比如成本低,入门简单,跨平台(AndroidiOS),有强大的微信团队支持(开放平台),便于推广易、引入用户,无需安装等优点。当然也有缺点,比如用户容易遗忘它的存在,无法与用户主动互动,与微信强依赖,某些APP能实现的功能它也许不能很好实现。

    好了,废话补多说,以下是笔者在小程序开发中的一些问题总结,包括如下内容:

     

    1.  使用navigateTo() 导航函数跳转页面的生命周期,进入页面:onLoad, onShow, onReady,回退:onUnload(每次进入都是如此执行)

     

    2.  使用navigateTo() 导航函数跳转的页面中的setInterval() 定时器,不会随着会退消亡,需要写代码销毁

     

    3.  表单提交的两种方式

    1)  采用 <form bindsubmit="formSubmit">; <input name='detailedAddress' />; function formSubmit(e) { const params = e.detail.value; }

    表单提交事件的方式

    2)  采用<input bindinput="inputChange" data-name='detailedAddress' />function inputChange(e) { let form = that.data.form; let name = e.currentTarget.dataset.name;  form[name] = e.detail.value; this.setData({ form: form });

    设置page.data 中的数据的方式,再提交时取出数据即可。

     

    4.  小程序引用外部文件

    1)  引用外部CSS@import '/style/box.wxss';

    2)  赋值过程引用外部JSconst func = require('app/func.js');

    3)  解构过程引用外部JSimport WxValidate from '../../../utils/WxValidate.js';

     

    5.  获取小程序运行环境

    app.js onLaunch() 方法中可以获取,const envVersion = __wxConfig.envVersion;     //'develop'开发版,'trial' 体验版,'release' 正式版

     

    6.  小程序配置

    1)  onReachBottomDistance 页面上拉触底事件触发时距页面底部距离,默认为50px。可以在页面设置"onReachBottomDistance": 0,这是只有当滚动条到达底部时才出发,也可以全局配置。

    2)  使用wx.chooseLocation() 打开地图选择位置功能时,微信7.0.0以下版本需要在app.json 中加入以下权限配置

    "permission": {

        "scope.userLocation": {

          "desc": "你的位置信息将用于定位效果展示"

        }

    }

     

    7.  Promise 的使用

    1)  声明Promise 可以实现多个回调方法,而且可以实现异步调用,例如:在fun1() 函数中声明:function fun1() { return new Promise((resolve, reject) => { resolve('success'); || reject('error'); }); }

    2)  调用方式:func().then(res => { res 'success' }).then(res => { res undefined }).catch(res => { res 'error' });

    3)  可以看见Promise 的成功回调函数可以多个,但是只能第一个能接受到参数;错误回调只能有一个,定义多个也只会回调第一个。

    4)  注意:当需要使用await 异步调用时,在Promise 中必须调用resolve() 方法,待Promise 执行完后才会执行await 之后的代码。

    5)  注意:当在事件中,需要获取异步方法中接口返回的数据,事件方法需要使用async 声明,使用如(var data = await order.getOrderDetail())的方法获取数据;在异步方法中使用resolve(data) 方法返回数据。

     

    8.  ES6语法

    1)  JSON 对象部分字段赋值ES6 简写形式

    var obj = { a: 123, b: 456, c: 789 };

    const { a, c } = obj;   //相当于:const a = obj.a; const c = obj.c;

    console.log(JSON.stringify(a));     //123

    console.log(JSON.stringify(c));     //789

     

    9.  引用JS import require 的区别

    node编程中最重要的思想就是模块化,importrequire都是被模块化所使用。

    1)  遵循规范

    require AMD规范引入方式;

    importes6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法。

    2)  调用时间

    require是运行时调用,所以require理论上可以运用在代码的任何地方

    import是编译时调用,所以必须放在文件开头。

    3)  本质

    require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量。

    import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

     

    10. 解决微信小程序中 new Date() 转换时间时间格式时 IOS 不兼容的问题

    var dstr = data.staff_hire_date.replace(/-/g, '/');

    data.staff_hire_date = new Date(dstr).format(

      "yyyy-MM-dd"

    );

     

    11. 下拉刷新

    "enablePullDownRefresh": true           //启用下拉刷新

    "backgroundTextStyle": "dark"           //设置下拉刷新样式(darklight)

    onPullDownRefresh: function ()//页面相关事件处理函数--监听用户下拉动作

    wx.stopPullDownRefresh();              //停止刷新

    wx.startPullDownRefresh(Object object);//开始下拉刷新

    禁止页面拖动,在page.json中设置"disableScroll": true 即可

     

     

    Ø  注意事项总结

    1.  本地缓存wx.setStorageSync() wx.getStorage() 中数据不共享;

    2.  页面中的字段,第一次导航进入后,回退了再次进入会是原来的值,比如:var editIsDefault = consts.whether.no;

    3.  小程序中data 属性,在JS 获取时会转为全部小写,例如:在wxml 中设置data-skuId="{{1}}",在JS 获取时需要使用小写:e.currentTarget.dataset.skuid

    4.  tabBar 页面只会执行一次onLoad() 方法,之后点击或wx.switchTab 并不会执行,会执行onShow() 方法

    5.  页面中的变量的值,如:var isLoadComplete = false; 不会跟着页面this 变化,一次赋值后,下次进入并不会发生改变

    6.  所有显示的页面,都需要在app.json 注册,例如:"pages": ["pages/cpage/shop/shop",] 否则不会显示标题。

    7.  页面中的变量不会跟谁页面关闭而消失,例如:var isOnShow = false; 当页面使用wx.navigateBack() 方法退回后,再次打开页面这个变量依然是原来的值。

    8.  iOS不支持日期格式如:2020-11-07 18:24:25,使用date.getMinutes().toString() 是会返回NaN,需要改为2020/11/07 18:24:25

  • 相关阅读:
    HTML静态网页--JavaScript-简介
    html 表单 css样式表
    html 表格 嵌套 frameset 热点
    触发器
    存储过程 if 复习 while 学习
    变量运算符
    SQL数学函数
    SQL数据库基础
    批處理文章引用
    对Excel操作(VBA)
  • 原文地址:https://www.cnblogs.com/abeam/p/16061199.html
Copyright © 2020-2023  润新知