• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序入门学习小结--全局设置、数据请求、双向绑定、页面路由跳转、模板抽取 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  学习微信小程序必备工具,微信小程序开发文档 W3C的这个文档真是超级详细,我们能够在这里查找到微信小程序的API、组件以及一些框架等。

  结合自己仿写的demo--仿网易蜗牛读书,你会感觉小程序并不难,前提你要属性前端的基本知识,wxml == html,  wxss == css, 

  下载微信开发者工具 他能帮助我们快速的进行小程序的开发。当然,在开发之前我们还需要拥有一个小程序账号(注册教程),通过账号我们就能够管理自己的小程序了。

  注: 这里有两种注册途径开发demo:

    1、没有申请APPID: 可以在新建项目的时候,选择无AppID,但是这种不能再手机上调试。

    2、申请APPID(点我): 点击开发者工具的上面的调试,用微信扫描弹出的二维码 ,即可在手机上看(苹果和安卓通用),他人也可通过此二维码进行观看,注意有时间限制。

  PS:申请APPID信息登录的时候,选择其他组织。主体信息登记可以文字随便填(认证码必须按照规定的字数),图片随意(表情包都可以),管理员登记必须是实名制,其他都没什么了,对了,不要去认证什么的,因为你的信息本来就是错了。

  打开微信开发工具,新建新项目,准备工作结束。

  一、app.js、app.json、app.wxss,这三个是全局配置文件。

  如果是入门学习,可以不用理会app.js,简单了解即可,app.wxss是配置全局的样式,一般用于初始化样式,常用样式的class,重点讲一下app.json

  

{
  // pages里面是快捷配置生成对应的页面,最上面是第一个展示的页面,可以自己调试
"pages":[ "pages/index/index", // 封面 "pages/logs/logs", // 日志 "pages/leader/leader", // 首页 "pages/leader/stories/stories", "pages/leader/authors/authors", "pages/stack/stack", // 分类 "pages/stack/booklist/booklist", "pages/stack/booklist/bookdetail/bookdetail", "pages/bookdesk/bookdesk", // 书架 "pages/mine/mine", // 个人中心 "pages/mine/news/news", "pages/mine/editInfo/editInfo" ],
  // 设置顶部导航栏的背景颜色、标题、不过颜色有限制,只有两种
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "蒂花之秀读书", "navigationBarTextStyle":"black" },
  // 底部的tab切换栏配置,注意list中的四种属性不能缺少,不能用文字图标,可以在iconfont.cn中下载png图片,涂上颜色即可
"tabBar":{ "color": "#6d4015", "selectedColor": "#1296db", "backgroundColor": "#ffffff", "borderStyle": "#e0e0e0", "list": [ { "pagePath": "pages/leader/leader", "iconPath": "./assets/icons/lingdu.png", "selectedIconPath": "./assets/icons/lingdu_sel.png", "text": "首页" }, { "pagePath": "pages/stack/stack", "iconPath": "./assets/icons/stack.png", "selectedIconPath": "./assets/icons/stack_sel.png", "text": "分类" }, { "pagePath": "pages/bookdesk/bookdesk", "iconPath": "./assets/icons/bookdesk.png", "selectedIconPath": "./assets/icons/bookdesk_sel.png", "text": "书架" }, { "pagePath": "pages/mine/mine", "iconPath": "./assets/icons/mine.png", "selectedIconPath": "./assets/icons/mine_sel.png", "text": "我的" } ] } }

  二、页面路由跳转

  wx.navigateTo、wx.redirectTo、wx.switchTab、 wx.reluanch(重启动),主要是前面三种。

  1、navigateTo、redirectTo只能开大非tabBar页面(tabBar页面就是在app.json 中设置的tabBar中list的页面),前者可以跳转后可以保存前面的页面,不用重新生成,最多5个,这样加载的速度非常快。后者前面的页面会被销毁,需要重新生成,如果网络较差,会很卡。

  2、switchTab只能打开tabBar页面,如从index封面页面定时跳到tabBar。

//index.js
//获取应用实例
const app = getApp();

Page({
  data: {
    time: 3
  },
  
  // 三秒进入tabBar页
  onLoad: function () {
    var that = this;
    var count = setInterval(function(){
      that.setData({
          time: that.data.time - 1
        });
      if (that.data.time <= 0){
        // 跳转tabBar页面
        wx.switchTab({
          url: "../leader/leader",
          complete: function(e){
            clearInterval(count);
          }
        });
      }
    }, 1000)
  }
})

  三、模块化开发,比如将共用的js进行封装,common.js,然后通过module.exports进行暴露对应的方法,方便调用

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}

module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye

// 在需要使用这些模块的文件中,使用require(path)将公共代码引入。
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

  四、wxml渲染

// 数据渲染
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

// 列表渲染
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

// 条件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

// 模板渲染(模板的文件不需要在app.json中配置)
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staff}}"></template>
// page.js
Page({
  data: {
    staff: {firstName: 'Hulk', lastName: 'Hu'}
  }
})
注:在导入模板的时候需要提前引入,wxml: <import src="./index/button/botton.wxml">, wxss: @import "./index/button/botton.wxss"
// 事件渲染 <view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) } })

  五、后台数据请求

  EasyMock 简单高效的伪造数据 用于后台的数据模拟,得到JSON数据,方便开发,个人免费, 前端自定义数据格式,同时方便后台的输出格式。

 onLoad: function (options) {
    // 请求数据
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/5a31e9eb513048307be27a9a/test/",
      success: function(res){
        that.setData({authors: res.data.data.index});
      }
    })
  },

  优化建议:

 1、频繁的去setData

  频繁的去操作数据setData,给data中的数据进行数据绑定,会造成卡顿。

 2、每次setData都传递大量新数据

 3、后台态页面进行setData

 4、图片资源

 还有一些常用标签:view(div) 、view-scroll(可滚动)、swiper(可轮播)、cover-view(覆盖视图上的文字)、movable-area、icon、text、rich-text、progress等标签元素,请参考微信小程序开发文档 。

  最后再说一句: 自己仿写的demo--仿网易蜗牛读书,有兴趣的同学可以看看,仿写一下哦;

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序:图片预览发布时间:2022-07-18
下一篇:
小程序转义字符去空格&amp;nbsp;发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap