前端技术前沿6

不念不忘少年蓝@ 2021-09-19 13:06 439阅读 0赞

数据缓存setStorageSync和getStorage

  1. //获取输入值
  2.   getInput: function(e) {
  3.     var self = this;
  4.     self.setData({
  5.       storage: e.detail.value
  6.     })
  7.   },
  8.   //存储输入值
  9.   saveInput: function() {
  10.     var self = this;
  11.     wx.setStorageSync('storage', self.data.storage)
  12.   },
  13.   output: function () {
  14.     var self = this;
  15.     wx.getStorage({
  16.       key: 'storage',
  17.       success: function (res) {
  18.         // success
  19.         self.setData({
  20.           storage2: res.data
  21.         })
  22.       }
  23.     })
  24.   }

数组

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

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

对象

  1. <template is="objectCombine" data="{
  2.    {for: a, bar: b}}"></template>
  3. Page({
  4.   data: {
  5.     a: 1,
  6.     b: 2
  7.   }
  8. })

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

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

  1. <template is="objectCombine" data="{
  2.    {...obj1, ...obj2, e: 5}}"></template>
  3. Page({
  4.   data: {
  5.     obj1: {
  6.       a: 1,
  7.       b: 2
  8.     },
  9.     obj2: {
  10.       c: 3,
  11.       d: 4
  12.     }
  13.   }
  14. })

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

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

  1. <template is="objectCombine" data="{
  2.    {foo, bar}}"></template>
  3. Page({
  4.   data: {
  5.     foo: 'my-foo',
  6.     bar: 'my-bar'
  7.   }
  8. })

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

微信小程序-消息提示框

  1. wx.showToast(OBJECT)
  3. wx.showToast({
  4.  title:'成功',
  5.  icon:'success',
  6.  duration: 2000
  7. })
  9. wx.showToast({
  10.  title:'加载中',
  11.  icon:'loading',
  12.  duration: 10000
  13. })
  15. setTimeout(function(){
  16.  wx.hideToast()
  17. },2000)
  19. wx.showModal({
  20.  title:'提示',
  21.  content:'这是一个模态弹窗',
  22.  success:function(res) {
  23.   if(res.confirm) {
  24.    console.log('用户点击确定')
  25.   }
  26.  }
  27. })

wx.showActionSheet(OBJECT)

显示操作菜单

  1. wx.showActionSheet({
  2.  itemList: ['A','B', 'C'],
  3.  success:function(res) {
  4.   if(!res.cancel) {
  5.    console.log(res.tapIndex)
  6.   }
  7.  }
  8. })

wx.setNavigationBarTitle(OBJECT)

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

wx.showNavigationBarLoading()

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

wx.hideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转：

wx.navigateTo(OBJECT)

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

wx.navigateBack(OBJECT)

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

  1. var animation = wx.createAnimation({
  2.  transformOrigin:"50% 50%",
  3.  duration: 1000,
  4.  timingFunction:"ease",
  5.  delay: 0
  6. })

wx.hideKeyboard()

收起键盘

wx.stopPullDownRefresh()

停止当前页面下拉刷新

image.png

API
基础
image.png

image.png

image.png

image.png

image

  1. /**
  2. project
  3. └── src
  4.     ├── components
  5.     |   └── child.wpy
  6.     ├── pages
  7.     |   ├── index.wpy    index 页面配置、结构、样式、逻辑
  8.     |   └── log.wpy      log 页面配置、结构、样式、逻辑
  9.     └──app.wpy           小程序配置项（全局样式配置、声明钩子等）
  10. **/
  12. // index.wpy
  14. <template>
  15.     <!-- 注意，使用for属性，而不是使用wx:for属性 -->
  16.     <repeat for="{
  17.    {list}}" key="index" index="index" item="item">
  18.         <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
  19.         <child :item="item"></child>
  20.     </repeat>
  21. </template>
  23. <script>
  24.     import wepy from 'wepy';
  25.     // 引入child组件文件
  26.     import Child from '../components/child';
  28.     export default class Index extends wepy.page {
  29.         components = {
  30.             // 声明页面中要使用到的Child组件的ID为child
  31.             child: Child
  32.         }
  34.         data = {
  35.             list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
  36.         }
  37.     }
  38. </script>
  40. <template>
  41.     <view class="child1">
  42.         <child></child>
  43.     </view>
  45.     <view class="child2">
  46.         <anotherchild></anotherchild>
  47.     </view>
  48. </template>
  51. <script>
  52.     import wepy from 'wepy';
  53.     import Child from '../components/child';
  55.     export default class Index extends wepy.page {
  56.         components = {
  57.             //为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题
  58.             child: Child,
  59.             anotherchild: Child
  60.         };
  61.     }
  62. </script>
  64. /**
  65. project
  66. └── src
  67.     ├── components
  68.     |   └── child.wpy
  69.     ├── pages
  70.     |   ├── index.wpy    index 页面配置、结构、样式、逻辑
  71.     |   └── log.wpy      log 页面配置、结构、样式、逻辑
  72.     └──app.wpy           小程序配置项（全局公共配置、公共样式、声明钩子等）
  73. **/
  75. // index.wpy
  77. <template>
  78.     <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 -->
  79.     <child></child>
  80. </template>
  82. <script>
  83.     import wepy from 'wepy';
  84.     //引入组件文件
  85.     import Child from '../components/child';
  87.     export default class Index extends wepy.page {
  88.         //声明组件，分配组件id为child
  89.         components = {
  90.             child: Child
  91.         };
  92.     }
  93. </script>

image

  1. // 错误示例
  3. import wepy from 'wepy';
  5. export default class MyComponent extends wepy.component {
  6.     methods = {
  7.         bindtap () {
  8.             let rst = this.commonFunc();
  9.             // doSomething
  10.         },
  12.         bindinput () {
  13.             let rst = this.commonFunc();
  14.             // doSomething
  15.         },
  17.         //错误：普通自定义方法不能放在methods对象中
  18.         customFunction () {
  19.             return 'sth.';
  20.         }
  21.     };
  23. }
  26. // 正确示例
  28. import wepy from 'wepy';
  30. export default class MyComponent extends wepy.component {
  31.     methods = {
  32.         bindtap () {
  33.             let rst = this.commonFunc();
  34.             // doSomething
  35.         },
  37.         bindinput () {
  38.             let rst = this.commonFunc();
  39.             // doSomething
  40.         },
  41.     }
  43.     //正确：普通自定义方法在methods对象外声明，与methods平级
  44.     customFunction () {
  45.         return 'sth.';
  46.     }
  48. }
  50. import wepy from 'wepy';
  52. export default class MyPage extends wepy.page {
  53. // export default class MyComponent extends wepy.component {
  54.     customData = {}  // 自定义数据
  56.     customFunction ()　{}  //自定义方法
  58.     onLoad () {}  // 在Page和Component共用的生命周期函数
  60.     onShow () {}  // 只在Page中存在的页面生命周期函数
  62.     config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件
  64.     data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定
  66.     components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件
  68.     mixins = [];  // 声明页面所引用的Mixin实例
  70.     computed = {};  // 声明计算属性（详见后文介绍）
  72.     watch = {};  // 声明数据watcher（详见后文介绍）
  74.     methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
  76.     events = {};  // 声明组件之间的事件处理函数
  77. }
  79. import wepy from 'wepy';
  81. export default class MyAPP extends wepy.app {
  82.     customData = {};
  84.     customFunction ()　{ }
  86.     onLaunch () {}
  88.     onShow () {}
  90.     config = {}  // 对应 app.json 文件
  92.     globalData = {}
  93. }

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

  1. import wepy from 'wepy';
  3. // 声明一个App小程序实例
  4. export default class MyAPP extends wepy.app {
  5. }
  7. // 声明一个Page页面实例
  8. export default class IndexPage extends wepy.page {
  9. }
  11. // 声明一个Component组件实例
  12. export default class MyComponent extends wepy.component {
  13. }
  15. <template lang="wxml">
  16.     <view>  </view>
  17. </template>
  19. <script>
  20. import wepy from 'wepy';
  21. export default class Com extends wepy.component {
  22.     components = {};
  24.     data = {};
  25.     methods = {};
  27.     events = {};
  28.     // Other properties
  29. }
  30. </script>
  32. <style lang="less">
  33. /** less **/
  34. </style>
  36. <script>
  37. import wepy from 'wepy';
  38. import Counter from '../components/counter';
  40. export default class Page extends wepy.page {
  41.     config = {};
  42.     components = {counter1: Counter};
  44.     data = {};
  45.     methods = {};
  47.     events = {};
  48.     onLoad() {};
  49.     // Other properties
  50. }
  51. </script>
  53. <template lang="wxml">
  54.     <view>
  55.     </view>
  56.     <counter1></counter1>
  57. </template>
  59. <style lang="less">
  60. /** less **/
  61. </style>
  63. <script>
  64. import wepy from 'wepy';
  65. export default class extends wepy.app {
  66.     config = {
  67.         "pages":[
  68.             "pages/index/index"
  69.         ],
  70.         "window":{
  71.             "backgroundTextStyle": "light",
  72.             "navigationBarBackgroundColor": "#fff",
  73.             "navigationBarTitleText": "WeChat",
  74.             "navigationBarTextStyle": "black"
  75.         }
  76.     };
  77.     onLaunch() {
  78.         console.log(this);
  79.     }
  80. }
  81. </script>
  83. <style lang="less">
  84. /** less **/
  85. </style>
  87. <style lang="less" src="page1.less"></style>
  88. <template lang="wxml" src="page1.wxml"></template>
  89. <script>
  90.     // some code
  91. </script>

5 small

wepy.config.js配置文件说明

  1. let prod = process.env.NODE_ENV === 'production';
  3. module.exports = {
  4.     'target': 'dist',
  5.     'source': 'src',
  6.     'wpyExt': '.wpy',
  7.     'compilers': {
  8.         less: {
  9.             'compress': true
  10.         },
  11.         /*sass: {
  12.             'outputStyle': 'compressed'
  13.         },
  14.         postcss: {
  15.             plugins: [
  16.                 cssnext({
  17.                     browsers:['iOS 9', 'Android 4.4']
  18.                 })
  19.             ]
  20.         },*/
  21.         babel: {
  22.             'presets': [
  23.                 'es2015',
  24.                 'stage-1'
  25.             ],
  26.             'plugins': [
  27.                 'transform-export-extensions',
  28.                 'syntax-export-extensions',
  29.                 'transform-runtime'
  30.             ]
  31.         }
  32.     },
  33.     'plugins': {
  34.     }
  35. };
  37. if (prod) {
  38.     // 压缩sass
  39.     module.exports.compilers['sass'] = {'outputStyle': 'compressed'};
  41.     // 压缩less
  42.     module.exports.compilers['less'] = {'compress': true};
  44.     // 压缩js
  45.     module.exports.plugins = {
  46.         'uglifyjs': {
  47.             filter: /\.js$/,
  48.             config: {
  49.             }
  50.         },
  51.         'imagemin': {
  52.             filter: /\.(jpg|png|jpeg)$/,
  53.             config: {
  54.                 'jpg': {
  55.                     quality: 80
  56.                 },
  57.                 'png': {
  58.                     quality: 80
  59.                 }
  60.             }
  61.         }
  62.     };
  63. }
  65. import wepy from 'wepy';
  67. async onLoad() {
  68.     await wepy.login();
  69.     this.userInfo = await wepy.getUserInfo();
  70. }
  72. onLoad = function () {
  73.     var self = this;
  74.     wx.login({
  75.         success: function (data) {
  76.             wx.getUserInfo({
  77.                 success: function (userinfo) {
  78.                     self.setData({userInfo: userinfo});
  79.                 }
  80.             });
  81.         }
  82.     });
  83. }
  85. 示例代码：
  87. import wepy from 'wepy';
  89. export default class Index extends wepy.page {
  90.     getData() {
  91.         return new Promise((resolve, reject) => {
  92.             setTimeout(() => {
  93.                 resolve({data: 123});
  94.             }, 3000);
  95.         });
  96.     };
  98.     async onLoad() {
  99.         let data = await this.getData();
  100.         console.log(data.data);
  101.     };
  102. }
  104. // index.wpy
  106. <template>
  107.     <view>
  108.         <panel>
  109.             <h1 slot="title"></h1>
  110.         </panel>
  111.         <counter1 :num="myNum"></counter1>
  112.         <counter2 :num.sync="syncNum"></counter2>
  113.         <list :item="items"></list>
  114.     </view>
  115. </template>
  117. <script>
  118. import wepy from 'wepy';
  119. //引入List、Panel和Counter组件
  120. import List from '../components/list';
  121. import Panel from '../components/panel';
  122. import Counter from '../components/counter';
  124. export default class Index extends wepy.page {
  125.     //页面配置
  126.     config = {
  127.         "navigationBarTitleText": "test"
  128.     };
  130.     //声明页面中将要使用到的组件
  131.     components = {
  132.         panel: Panel,
  133.         counter1: Counter,
  134.         counter2: Counter,
  135.         list: List
  136.     };
  138.     //可用于页面模板中绑定的数据
  139.     data = {
  140.         myNum: 50,
  141.         syncNum: 100,
  142.         items: [1, 2, 3, 4]
  143.     }
  144. }
  145. </script>

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

官方微信公众号

吹逼交流群：711613774

吹逼交流群

发表评论

表情：
评论列表 （有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

    相关 前端技术前沿10

    允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NP

    水深无声水深无声/ 0 赞/ 475 阅读