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

微信小程序基本入门

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

准备

Demo 项目地址

https://github.com/zce/weapp-demo

Clone or Download(需准备GIT环境)

$ cd path/to/project/root
$ git clone https://github.com/zce/weapp-demo.git project-name --depth 1
$ cd project-name

没有git环境,可以直接下载

安装开发环境

下载地址

安装过程

对于Windows用户直接双击下一步的方式安装即可,此处注意我们使用的版本是官方最新的版本(不需要破解),可以不用AppID,也就是说没有资格的开发者也可以测试。

环境测试以及演示项目

安装完成过后通过打开我们已经完成的应用测试环境是否正常

开发者工具安装完成后,打开并使用微信扫码登录。

选择创建“项目”,填入你在公众平台的AppID,如果没有的话可以点击无AppID

设置一个本地项目的名称(非小程序名称),比如WeApp Demo,并选择一个本地文件夹作为存储目录。

接下来点击新建项目就可以在主界面中预览到我们的豆瓣电影示例


小程序开发初体验

Hello world

希望是一个从零到一的转换过程~

创建项目

接下来创建一个新的项目,理解小程序项目的基本结构和一些基础语法。

官方的开发工具为此准备了一个QuickStart项目。在创建过程中,如果选择的文件夹是个空文件夹,开发者工具会提示:是否需要创建一个quick start项目。选择,开发者工具会自动帮助我们在开发目录里生成一个简单的项目。

借助官方的QuickStart项目完成最基本的Hello world,理解小程序项目的基本结构,学习基础操作与语法。

项目结构

└─ empty-folder/ ·································· 项目所在目录
   ├─ pages/ ······································ 页面目录
   │  ├─ index/ ··································· index页面
   │  │  ├─ index.js ······························ index页面逻辑
   │  │  ├─ index.wxml ···························· index页面结构
   │  │  └─ index.wxss ···························· index页面样式
   │  └─ logs/ ···································· logs页面
   │     ├─ logs.js ······························· logs页面逻辑
   │     ├─ logs.wxml ····························· logs页面结构
   │     └─ logs.wxss ····························· logs页面样式
   ├─ utils/ ······································ 公共脚本目录
   │  └─ util.js ·································· 工具脚本
   ├─ app.js ······································ 应用程序逻辑
   ├─ app.json ···································· 应用程序配置
   └─ app.wxss ···································· 应用程序公共样式

我简单的画了一个结构图:

页面结构

每个页面组件也分为四个文件组成:

[page-name].js

页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理

[page-name].json

设置当前页面工作时的window的配置,此处会覆盖app.json中的window设置,也就是说只可以设置window中设置的属性

[page-name].wxml

wxml指的是Wei Xin Markup Language

用于定义页面中元素结构的,语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法

[page-name].wxss

wxml指的是Wei Xin Style Sheet

用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)

项目配置

相关链接:

小程序中的配置文件分为两种:

  • 全局配置文件,根目录下的app.json
  • 页面配置文件,每个页面目录下的[page-name].json
app.json

项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)

{
  // 当前程序是由哪些页面组成的(第一项默认为初始页面)
  // 所有使用到的组件或页面都必须在此体现
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 应用程序窗口设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 应用导航栏设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 网络超时设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}
[page-name].json

用于指定特定页面工作时,window的设置:

{
  // 导航条背景色
  "navigationBarBackgroundColor": "#35495e",
  // 导航条前景色(只能是white/black)
  "navigationBarTextStyle": "white",
  // 导航条文本
  "navigationBarTitleText": "电影 « 豆瓣",
  // 窗口背景颜色
  "backgroundColor": "#fff",
  // 窗口前景色
  "backgroundTextStyle": "dark",
  // 是否开启下拉刷新
  "enablePullDownRefresh": true
}

逻辑层分析

应用程序逻辑app.js

app.js作为项目主入口文件,用于创建应用程序对象

// App函数是一个全局函数,用于创建应用程序对象
App({
  // ========== 全局数据对象(可以整个应用程序共享) ==========
  globalData: { ... },

  // ========== 应用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 应用程序启动时触发一次
  onLaunch () { ... },

  // 当应用程序进入前台显示状态时触发
  onShow () { ... },

  // 当应用程序进入后台状态时触发
  onHide () { ... }
})

也就是说,当应用程序启动时会自动执行项目目录下的app.js文件。

app.js中通过调用全局App([option])方法创建一个应用程序实例。

其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。

属性 类型 描述 触发时机
onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide

也可以定义任意其他的对象成员(例如:方法和属性),这些成员可以在内部直接使用,或者外部通过获取app对象调用:

属性 类型 描述
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,一般用于存放业务逻辑配置,比如:API地址

app.js

App({
  data1: \'123\',
  data2: { message: \'hello world\' },
  api: {
    list: \'https://github.com/zce/\',
    detail: \'https://github.com/zce/\',
  },
  foo () {
    return \'bar\'
  }
})

other.js

// getApp 也是全局函数,可以在任意地方调用,用于获取全局应用程序实例对象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())

页面逻辑[page-name].js

[page-name].js是一个页面的重要组成部分,用于创建页面对象

// 获取全局应用程序对象
const app = getApp()

// Page也是一个全局函数,用来创建页面对象
Page({
  // ========== 页面数据对象(可以暴露到视图中,完成数据绑定) ==========
  data: { ... },

  // ========== 页面方法(可以用于抽象一些公共的行为,例如加载数据,也可以用于定义事件处理函数) ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 页面加载触发
  onLoad () { ... }

  ...
})

在应用程序执行到当前页面时,会执行当前页面下对应的[page-name].js文件。
[page-name].js中通过调用全局Page([option])方法创建一个页面实例。

Page([option])方法[option]参数说明
属性 类型 描述
data Object 页面的初始数据
onLoad

鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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