微信小程序开发简单教程

云裂变 · 2018-11-4 08:15:36

小法式开辟预备

在官网上间接注册小法式账号，可以治理你的小法式的权限，检察数据报表，公布小法式等操纵。登录账号，获得对应的小法式的 AppID（建立小法式项目需要用到）。

接着下载微信开辟者工具，建立了“普通快速启动模板”（挑选空目录下才有此选项），大概间接挑选小法式官方Demo大概weui小法式版UI当做进修Demo

建立小法式项目

小法式代码组成

微信小法式目录

wxml文件

WXML（WeiXin Markup Language）是框架设想的一套标签说话，连系根本组件、事务系统，可以构建出页面的结构。

这个实在就是“html”，不能利用W3C的标签，转而利用的是微信自界说的标签，常见的就是用<view>取代<div>，具体有哪些标签可以检察官网微信根本组件。页面结构是以<page>为父节点节点，没有<html>和<body>。

小法式wxml页面
下面代码就是简单的数据绑定和事务：  <view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) } })
js文件

App() 函数用来注册一个小法式。接管一个 object 参数，其指定小法式的生命周期函数等。App() 必须在根目录下的app.js 中注册，且不能注册多个。
App({ onLaunch: function(options) { // 当小法式初始化完成时，会触发 onLaunch（全局只触发一次） }, onShow: function(options) { // 当小法式启动，或从背景进入前台显现，会触发 onShow }, onHide: function() { // 当小法式畴前台进入背景，会触发 onHide }, onError: function(msg) { // 当小法式发生剧本毛病，大概 api 挪用失利时，会触发 onError 并带上毛病信息 console.log(msg) }, globalData: { // 全局变量，留意App()和Page分歧，一个是globalData,一个是data name: 'Gensen' } //开辟者可以增加肆意的函数或数据到 Object 参数中，用 this 可以拜候 myMethod: function() { console.log(this.globalData.globalData); // "Gensen" } })
Page()函数用来注册一个页面。接管一个 object 参数，其指定页面的初始数据、生命周期函数、事务处置函数等。相对一个全局一个部分，对应每个页面都有一个。
Page({ data: { // 页面的初始数据 text: "This is page data." }, onLoad: function(options) { // 生命周期函数--监听页面加载 // 一个页面只会挪用一次，可以在 onLoad 中获得翻开当前页面所挪用的 query 参数。 }, onReady: function() { // 生命周期函数--监听页面初度衬着完成 // 一个页面只会挪用一次，代表页面已经预备安妥，可以和视图层停止交互。 // 对界面的设备如wx.setNavigationBarTitle请在onReady以后设备。 }, onShow: function() { // 生命周期函数--监听页面显现 }, onHide: function() { // 生命周期函数--监听页面隐藏 // 当navigateTo或底部tab切换时挪用。 }, onUnload: function() { // 生命周期函数--监听页面卸载 // 当redirectTo或navigateBack的时辰挪用。 }, onPullDownRefresh: function() { // 页面相关事务处置函数--监听用户下拉行动 // 需要在app.json中的`window`选项中或页面设置page.json中开启`enablePullDownRefresh`。 // 当处置完数据革新后，`wx.stopPullDownRefresh`可以停止当前页面的下拉革新。 }, onReachBottom: function() { // 页面上拉触底事务的处置函数 }, onShareAppMessage: function () { // 用户点击右上角转发 return { title: '自界说转发题目', path: '/page/logs/logs' } }, onPageScroll: function() { // 页面转动触发事务的处置函数 }, onTabItemTap(item) { // 当前是 tab 页时，点击 tab 时触发 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 开辟者可以增加肆意的函数或数据到 object 参数中，在页面的函数中用 this 可以拜候 viewTap: function() { // 间接点窜 this.data 而不挪用 this.setData 是没法改变页面的状态的，还会形成数据纷歧致 this.setData({ text: 'Set some data for updating view.' }, function() { // 回调函数 }) }, customData: { hi: 'MINA' }})

Page 实例的生命周期

js部分还包括路由、模块、API（小法式开辟框架供给丰富的微信原生 API，可以方便的调起微信供给的才能，如获得用户信息，当地存储，付出功用等）后续再细讲。wxss文件

WXSS(WeiXin Style Sheets)是一套款式说话，用于描写 WXML 的组件款式。实在就是CSS改了个后缀名，分歧的地方是多了rpx尺寸单元和款式导入，款式挑选器只能利用一部分，像后代子代挑选器就不能用了，今朝支持的挑选器以下：

挑选器样例样例描写 .class .intro 挑选一切具有 class="intro" 的组件 #id #firstname 挑选具有 id="firstname" 的组件 element view 挑选一切 view 组件 element, element view, checkbox 挑选一切文档的 view 组件和一切的 checkbox 组件 ::after view::after 在 view 组件后边插入内容 ::before view::before 在 view 组件前边插入内容界说在 app.wxss 中的款式为全局款式，感化于每一个页面。在 page 的 wxss 文件中界说的款式为部分款式，只感化在对应的页面，并会覆盖 app.wxss 中不异的挑选器。

小法式全局款式设备

设置文件

app.json

用来对微信小法式停止全局设置，决议页面文件的途径、窗口表示、设备收集超不时候、设备多 tab 等。法式启动默许的第一个页面，就是app.json的pages中的第一个页面。

微信小法式app.json设置

留意：json文件不能正文，否则会报错（上面图片大误）page.json

每一个小法式页面也可以利用.json文件来对本页面的窗口表示停止设置。页面的设置比app.json全局设置简单很多，只是设备 app.json 中的 window 设置项的内容，页面中设置项会覆盖 app.json 的 window 中不异的设置项。

结尾

先简单先容下微信小法式代码结构和分歧文件对应的功用和感化，后续有空将细讲某个模块大概一些常用的利用处景。

云裂变会聚微信运营，微信小法式，淘客运营，区块链等专业范畴，天天更新最适用的微信运营，微信小法式，淘客运营，区块链常识。

9999spl · 2018-11-4 08:15:47

小法式火了吗？

chanjew · 2018-11-4 08:15:57

转发了

amwkfnui · 2018-11-4 08:16:37

转发了

darkpriest · 2018-11-4 08:17:24

转发了

centery09181123 · 2018-11-4 08:17:39

转发了

ddd2089 · 2018-11-4 08:18:22

转发了

袋qaavz · 2018-11-4 08:18:40

转发了

kurtbai · 2018-11-4 08:19:29

转发了

月光情人 · 2018-11-4 08:19:47

转发了

		自动登录	找回密码
密码			立即注册

微信小程序开发简单教程

大神点评

说点什么

神回复