前端技术前沿6

微信小程序数据处理与API介绍

数据缓存setStorageSync和getStorage

//获取输入值
  getInput: function(e) {
    var self = this;
    self.setData({
      storage: e.detail.value
    })
  },
  //存储输入值
  saveInput: function() {
    var self = this;
    wx.setStorageSync('storage', self.data.storage)
  },
  output: function () {
    var self = this;
    wx.getStorage({
      key: 'storage',
      success: function (res) {
        // success
        self.setData({
          storage2: res.data
        })
      }
    })
  }

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

扩展运算符 … 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

对象的 key 和 value 相同,也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合成的对象是 {foo: ‘my-foo’, bar:‘my-bar’}。

微信小程序-消息提示框

wx.showToast(OBJECT)
wx.showToast({
 title:'成功',
 icon:'success',
 duration: 2000
})
wx.showToast({
 title:'加载中',
 icon:'loading',
 duration: 10000
})
 
setTimeout(function(){
 wx.hideToast()
},2000)
wx.showModal({
 title:'提示',
 content:'这是一个模态弹窗',
 success:function(res) {
  if(res.confirm) {
   console.log('用户点击确定')
  }
 }
})

wx.showActionSheet(OBJECT)

显示操作菜单

wx.showActionSheet({
 itemList: ['A','B', 'C'],
 success:function(res) {
  if(!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

wx.showNavigationBarLoading()

在当前页面显示导航条加载动画。

wx.hideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转:

wx.navigateTo(OBJECT)

wx.navigateTo({
 url:'test?id=1'
})

wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。

var animation = wx.createAnimation({
 transformOrigin:"50% 50%",
 duration: 1000,
 timingFunction:"ease",
 delay: 0
})

wx.hideKeyboard()

收起键盘

wx.stopPullDownRefresh()

停止当前页面下拉刷新

image.png

API
基础
image.png

image.png

image.png

image.png

image

/**
project
└── src
    ├── components
    |   └── child.wpy
    ├── pages
    |   ├── index.wpy    index 页面配置、结构、样式、逻辑
    |   └── log.wpy      log 页面配置、结构、样式、逻辑
    └──app.wpy           小程序配置项(全局样式配置、声明钩子等)
**/

// index.wpy

<template>
    <!-- 注意,使用for属性,而不是使用wx:for属性 -->
    <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件,同时传入item -->
        <child :item="item"></child>
    </repeat>
</template>

<script>
    import wepy from 'wepy';
    // 引入child组件文件
    import Child from '../components/child';

    export default class Index extends wepy.page {
        components = {
            // 声明页面中要使用到的Child组件的ID为child
            child: Child
        }

        data = {
            list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
        }
    }
</script>
<template>
    <view class="child1">
        <child></child>
    </view>

    <view class="child2">
        <anotherchild></anotherchild>
    </view>
</template>


<script>
    import wepy from 'wepy';
    import Child from '../components/child';

    export default class Index extends wepy.page {
        components = {
            //为两个相同组件的不同实例分配不同的组件ID,从而避免数据同步变化的问题
            child: Child,
            anotherchild: Child
        };
    }
</script>
/**
project
└── src
    ├── components
    |   └── child.wpy
    ├── pages
    |   ├── index.wpy    index 页面配置、结构、样式、逻辑
    |   └── log.wpy      log 页面配置、结构、样式、逻辑
    └──app.wpy           小程序配置项(全局公共配置、公共样式、声明钩子等)
**/

// index.wpy

<template>
    <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签,从而在`<template>`模板部分中插入组件 -->
    <child></child>
</template>

<script>
    import wepy from 'wepy';
    //引入组件文件
    import Child from '../components/child';

    export default class Index extends wepy.page {
        //声明组件,分配组件id为child
        components = {
            child: Child
        };
    }
</script>

image

// 错误示例

import wepy from 'wepy';

export default class MyComponent extends wepy.component {
    methods = {
        bindtap () {
            let rst = this.commonFunc();
            // doSomething
        },

        bindinput () {
            let rst = this.commonFunc();
            // doSomething
        },

        //错误:普通自定义方法不能放在methods对象中
        customFunction () {
            return 'sth.';
        }
    };

}


// 正确示例

import wepy from 'wepy';

export default class MyComponent extends wepy.component {
    methods = {
        bindtap () {
            let rst = this.commonFunc();
            // doSomething
        },

        bindinput () {
            let rst = this.commonFunc();
            // doSomething
        },
    }

    //正确:普通自定义方法在methods对象外声明,与methods平级
    customFunction () {
        return 'sth.';
    }

}
import wepy from 'wepy';

export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定义数据

    customFunction () {}  //自定义方法

    onLoad () {}  // 在Page和Component共用的生命周期函数

    onShow () {}  // 只在Page中存在的页面生命周期函数

    config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}
import wepy from 'wepy';

export default class MyAPP extends wepy.app {
    customData = {};

    customFunction () { }

    onLaunch () {}

    onShow () {}

    config = {}  // 对应 app.json 文件

    globalData = {}
}

小程序被分为三个实例:小程序实例App、页面实例Page、组件实例Component

import wepy from 'wepy';

// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}
<template lang="wxml">
    <view>  </view>
</template>

<script>
import wepy from 'wepy';
export default class Com extends wepy.component {
    components = {};

    data = {};
    methods = {};

    events = {};
    // Other properties
}
</script>

<style lang="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
import Counter from '../components/counter';

export default class Page extends wepy.page {
    config = {};
    components = {counter1: Counter};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

<template lang="wxml">
    <view>
    </view>
    <counter1></counter1>
</template>

<style lang="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
export default class extends wepy.app {
    config = {
        "pages":[
            "pages/index/index"
        ],
        "window":{
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "black"
        }
    };
    onLaunch() {
        console.log(this);
    }
}
</script>

<style lang="less">
/** less **/
</style>
<style lang="less" src="page1.less"></style>
<template lang="wxml" src="page1.wxml"></template>
<script>
    // some code
</script>

5 small

wepy.config.js配置文件说明

let prod = process.env.NODE_ENV === 'production';

module.exports = {
    'target': 'dist',
    'source': 'src',
    'wpyExt': '.wpy',
    'compilers': {
        less: {
            'compress': true
        },
        /*sass: {
            'outputStyle': 'compressed'
        },
        postcss: {
            plugins: [
                cssnext({
                    browsers:['iOS 9', 'Android 4.4']
                })
            ]
        },*/
        babel: {
            'presets': [
                'es2015',
                'stage-1'
            ],
            'plugins': [
                'transform-export-extensions',
                'syntax-export-extensions',
                'transform-runtime'
            ]
        }
    },
    'plugins': {
    }
};

if (prod) {
    // 压缩sass
    module.exports.compilers['sass'] = {'outputStyle': 'compressed'};

    // 压缩less
    module.exports.compilers['less'] = {'compress': true};

    // 压缩js
    module.exports.plugins = {
        'uglifyjs': {
            filter: /\.js$/,
            config: {
            }
        },
        'imagemin': {
            filter: /\.(jpg|png|jpeg)$/,
            config: {
                'jpg': {
                    quality: 80
                },
                'png': {
                    quality: 80
                }
            }
        }
    };
}
import wepy from 'wepy';

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
        }
    });
}
示例代码:

import wepy from 'wepy';

export default class Index extends wepy.page {
    getData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({data: 123});
            }, 3000);
        });
    };

    async onLoad() {
        let data = await this.getData();
        console.log(data.data);
    };
}
// index.wpy

<template>
    <view>
        <panel>
            <h1 slot="title"></h1>
        </panel>
        <counter1 :num="myNum"></counter1>
        <counter2 :num.sync="syncNum"></counter2>
        <list :item="items"></list>
    </view>
</template>

<script>
import wepy from 'wepy';
//引入List、Panel和Counter组件
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter';

export default class Index extends wepy.page {
    //页面配置
    config = {
        "navigationBarTitleText": "test"
    };

    //声明页面中将要使用到的组件
    components = {
        panel: Panel,
        counter1: Counter,
        counter2: Counter,
        list: List
    };

    //可用于页面模板中绑定的数据
    data = {
        myNum: 50,
        syncNum: 100,
        items: [1, 2, 3, 4]
    }
}
</script>

请点赞!因为你的鼓励是我写作的最大动力!

官方微信公众号

吹逼交流群:711613774

吹逼交流群

### 2025年最新前端JavaScript技术趋势 随着前端技术的快速发展,JavaScript 作为前端开发的核心语言,也在持续进化,并与新兴技术深度融合。2025年,JavaScript 技术前端领域呈现出以下几个显著的趋势。 #### 1. WebAssembly 的深度集成 WebAssembly(Wasm)正逐渐成为提升前端性能的重要工具。它允许开发者将 C、C++、Rust 等高性能语言编写的代码编译为可在浏览器中运行的二进制格式,从而显著提升执行效率。2025年,JavaScript 与 WebAssembly 的集成进一步深化,尤其是在图形渲染、音视频处理和 AI 推理等高性能需求场景中,Wasm 成为 JavaScript 的有力补充[^2]。 #### 2. JavaScript 模块化与打包工具的优化 随着模块化开发模式的普及,JavaScript 的构建工具也在不断优化。Vite、Rollup 和 Webpack 等工具在 2025 年继续演进,支持更快的冷启动、增量构建和更智能的依赖管理。ES Modules(ESM)已成为主流,开发者可以直接在浏览器中使用原生模块,而无需依赖复杂的打包流程[^2]。 #### 3. 与 AI 技术的融合 JavaScript 正在逐步与人工智能技术结合,特别是在前端 AI 推理方面。TensorFlow.js 和 ONNX.js 等库在 2025 年变得更加成熟,支持更复杂的模型在浏览器端直接运行。这使得前端应用能够实现本地化的图像识别、自然语言处理和个性化推荐等功能,减少了对后端服务的依赖[^1]。 #### 4. 前端框架的持续演进 主流 JavaScript 框架如 React、Vue 和 Angular 在 2025 年继续更新迭代,强调性能优化、更简洁的 API 和更好的开发者体验。React 的并发模式已全面落地,Vue 4 引入了更智能的响应式系统,Angular 则在工程化和可维护性方面取得突破。此外,Svelte 也在轻量级应用和嵌入式场景中获得更广泛的应用[^3]。 #### 5. 实时协作与多人交互技术的普及 随着元宇宙和 Web3D 技术的发展,前端 JavaScript 在实时协作和多人交互方面扮演了关键角色。借助 WebSocket、WebRTC 和基于 WebGPU 的图形渲染技术,开发者能够构建更加流畅的多人在线应用,如虚拟会议、协同编辑和实时游戏等[^4]。 #### 6. 更强的安全性和隐私保护机制 JavaScript 在浏览器端的安全性问题一直是开发者关注的重点。2025 年,浏览器厂商和标准组织进一步加强了 JavaScript 的安全机制,包括更严格的同源策略、更完善的沙箱环境以及隐私保护 API 的增强。这些改进有效提升了用户数据的安全性[^3]。 #### 7. JavaScript 在边缘计算中的应用 随着边缘计算的兴起,JavaScript 也被用于构建轻量级的边缘服务。Node.js 在 2025 年进一步优化,支持在资源受限的设备上运行,并与前端 JavaScript 代码实现无缝协同,从而构建出高效的边缘-前端交互架构。 ### 示例代码:使用 WebAssembly 提升 JavaScript 性能 ```javascript // 假设我们已经有一个 WebAssembly 模块 add.wasm,用于执行加法运算 fetch('add.wasm').then(response => WebAssembly.instantiateStreaming(response) ).then(results => { const add = results.instance.exports.add; console.log(add(2, 3)); // 输出 5 }); ``` 该代码演示了如何在 JavaScript 中调用 WebAssembly 模块,从而提升关键计算任务的性能。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值