创意电子

标题: 微信小程序开发简单教程 [打印本页]

作者: 谨珩工作室 时间: 2018-11-3 10:21
标题: 微信小程序开发简单教程
小程序开发准备

在官网上直接注册小程序账号，可以管理你的小程序的权限，查察数据报表，发布小程序等操作。登录账号，获取对应的小程序的 AppID（创建小程序项目需要用到）。
接着下载微信开发者工具，建立了“普通快速启动模板”（选择空目录下才有此选项），或者直接选择小程序官方Demo或者weui小程序版UI当做学习Demo

创建小程序项目
小程序代码构成

微信小程序目录
wxml文件
WXML（WeiXin Markup Language）是框架设计的一套标签语言，联合基础组件、变乱系统，可以构建出页面的结构。
这个其实就是“html”，不能利用W3C的标签，转而利用的是微信自定义的标签，常见的就是用取代，详细有哪些标签可以查察官网微信基础组件。页面结构是以为父节点节点，没有和。

小程序wxml页面
下面代码就是简单的数据绑定和变乱： {{count}} 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 中相同的配置项。
结尾

先简单先容下微信小程序代码结构和差别文件对应的功能和作用，后续有空将细讲某个模块或者一些常用的应用场景。

作者: 老赵和他的 时间: 2018-11-3 10:56
转发了

作者: 闲云野鹤15884 时间: 2018-11-3 11:10
转发了

作者: 一只走丢的存钱罐 时间: 2018-11-3 11:21
转发了

作者: 梦年87003578 时间: 2018-11-3 11:32
转发了

作者: 文灬俊 时间: 2018-11-3 11:47
转发了

作者: 帝皇商行 时间: 2018-11-3 12:35
转发了

作者: 班一一 时间: 2018-11-3 13:21
转发了

作者: ls3038 时间: 2018-11-3 14:15
转发了

作者: ls3038 时间: 2018-11-3 14:16
转发了

作者: 豆永宝 时间: 2018-11-3 14:25
转发了

作者: 海阔天空222666 时间: 2018-11-3 20:33
小程序火了吗？

欢迎光临创意电子 (https://wxcydz.cc/)