美文网首页
初试小程序

初试小程序

作者: 嘁_ | 来源:发表于2019-07-11 21:47 被阅读0次

开发前的装备

  1. 注册账号
  2. 下载开发者工具
  3. 注册登录微信公众平台并记下appID(在开发设置里)

快速开始

  1. 打开登陆开发者工具,创建小程序项目
  2. 默认打开后,会发现已经自动给我们写入了一些代码



    页面是空白的,但是打开调试器发现有很多报错



    点击右上角的详情,修改下配置,把调试基础库改成1.9.1,然后把不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书勾选上,不然我们的请求就必须得是https的了

    此时控制台没有报错了,页面展示如下,点击按钮,我们可以看到微信授权,点击允许,我们的头像和昵称就显示在页面上了



项目结构

我们主要看app.js、app.json、app.wxss三个文件和pages文件夹里面的wxml

  1. app.js 作为小程序的入口,里面有个app实例,每一个小程序都会有一个app实例,小程序启动后触发onLaunch函数,获取用户信息
  2. app.json 是小程序的全局配置,page字段放所有页面的路径,window字段定义所有页面顶部的背景色,字体颜色
  3. app.wxss 是小程序的公用样式(小程序的选择器与CSS有一定出入,仅支持部分css选择器)
  4. wxml 就是我们的HTML文件,常用标签为 viewtext 等,没有所谓的divspanp一类的标签了,我们习惯称它们为组件

设计理念

小程序内部可以理解成一个mvvm的框架,分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈

// pages/test/index.js
Page({
  data:{  // 页面的初始数据
      text: 'hello world'
  },
  onLoad(){
    console.log('hello')
  },
  change(){
    this.setData({
    text:'hello'
  })
  }
})

使用page函数注册一个页面,接收一个Object参数,使用了onLoad函数来监听页面的加载并定义了change函数使用setData函数更改了text的值

更改data数据的时候必须调用setData函数进行更改
// pages/test/index.wxml
<view>{{text}}</view> //  显示hello world
<button bindtap="change">点击更改上面文字</button> //  显示hello 

button上绑定了点击事件,触发change函数

事件传递参数

我们触发事件的时候,可能需要传递一些参数,但是在小程序里无法像JS那样直接传递,我们需要将参数绑定到事件元素上

// index.wxml
<button data-test="哈哈"  bindtap="change">点击我</button>

使用e.currentTarget.dataset来获取值

// index.js
change(e){
  e.currentTarget.dataset.test  // 哈哈
}

setData函数拓展

  1. 修改嵌套多层的数据, 如果是写死的参数可以使用引号将参数包起来
this.setData({
    'text.msg': 'hello'
})
  1. 如果是传递进来的值呢?很简单将data的key用[]括起来
// index.wxml
<button bindtap="change" data-key="text.msg">点击我</button>
// index.js
change(e){
var key = e.currentTarget.dataset.key
  this.setData({
    key: 'hello'     // 数据不会更改
    [key]: 'hello' //  数据会更改
  })
}

路由

小程序里面所有的页面路由由框架进行管理
我们可以使用getCurrnetPages函数获取当前页面栈的实例,返回一个数组, 最后一个元素为当前页面
小程序定义了五个用于导航跳转的API,这里列举两个常用的

  1. wx.navigateTo 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
  1. wx.redirectTo 关闭当前页面,跳转到应用内的某个页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})

通过上面的API跳转带的参数,在页面上我们需要怎么获取呢?

// text.js
Page({
  data:{
     ... // 页面数据
  },
  onLoad(options){
    console.log(options.text)  // 121212 获取上个页面带过来的值
  }
})
数据过滤 过滤器

如果你使用过vue、angular框架,对|管道符肯定不陌生,它用来对我们的数据进行转换,那小程序里面有没有过滤器呢,不过这个是真没有。
但是目前有两种方法,可以实现过滤。

  1. 获取数据的时候,直接改了,干脆利落、好不优雅。
  2. 使用最后我们要介绍的wxs
WXS

WXS是小程序的一套脚本语言,首先和js是不同的语言,其次运行环境和js也是隔离开的,wxs不能调用js文件中的函数,也不能调用小程序的API,它主要用来增强wxml。
wxs不能使用es6语法,人家不是js啦😷
接下来我们来实现一个使用wxs实现一个简单的过滤器
1、首先我们创建filter.wxs文件并写入以下内容

// filter.wxs
var Filter = {
  getSatusStr: function(num){
    var str = '';
    switch (num) {
      case 0:
        string = '我是0的状态'
        break;
      case 1:
        string = '我是1的状态'
        break;
      default:
        string = '我是默认的状态'
        break;
    }
    return str
  }
}
module.exports = {
  status: Filter.getSatusStr
}

同级下index.wxml使用

<wxs module="filter" src="./filter.wxs"></wxs> 
<view wx:for="{{list}}">
  <view>{{filter.status(item.status)}}</view>  
</view>
  1. 每个wxs标签都有一个module 属性 ,wxs可以写在wxml里面的wxs标签里和.wxs文件里
  2. wxs文件中引入其他wxs文件时候,可以使用require函数,接受相对路径
  3. 在wxml标签里使用外部wxs文件的时候,src属性是相对路径

总结

  1. 使用sass写wxss文件,在目录下创建index.scss文件,当前目录下执行 sass --watch index.scss:index.wxss --style expanded
  2. wcss 文件里面不能使用本地图片,请使用base64、网上图片或者image
  3. 修改页面的背景,类似与css中设置body,可以直接设置page
  4. 不要直接操作this.data,使用this.setData函数,切记、切记

相关文章

  • 初试小程序

    1、环境搭建 直接进入微信平台下载即可 2、基本开发思路 小程序每个界面一般来说对应有三个文件 xxx.js 用于...

  • 初试小程序

    开发前的装备 注册账号 下载开发者工具 注册登录微信公众平台并记下appID(在开发设置里) 快速开始 打开登陆开...

  • 初试微信小程序

    1.工具下载官网 https://mp.weixin.qq.com/debug/wxadoc/dev/?t=147...

  • 小程序初试问题总结

    中秋佳节放假三天,闲着没事,给自己充电。尝试了一下小程序,遇到几个问题,总结下:问题一:当我们程序写好了,想调用后...

  • 电商小程序“618”斗法,社交应用Hello Pal发力中国市场

    在“双11”初试啼声的小程序又将在“618”狂欢节大展身手。当各个商家都开始准备相关的营销预热活动时,小程序已渐成...

  • # 微信小程序开发之-初试

    广告 欢迎大家一起交流 QQ群 139852091 公众号 1、工具 工具使用微信开发平台提供的微信web开发者工...

  • 《黄埔军校》之九:黄埔一期400多

    投考黄埔军校的基本程序是,全国19个省区分别先进行招生初试,初试合格后再介绍到上海、重庆等地复试,如当时毛泽东即在...

  • Electron初试

    Electron初试 简介 electron使用html,css和JavaScript来构建块跨平台桌面应用程序(...

  • 潍坊小程序开发

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

  • 潍坊商城小程序开发制作

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

网友评论

      本文标题:初试小程序

      本文链接:https://www.haomeiwen.com/subject/ndkhkctx.html