• t.me/wxcydzcc

    工作时间

    周一至周五:9:00-21:00

    周末及节日:9:00-18:00

  • 手机版二维码

    随时手机查素材

  • 扫描二维码

    官方微信公众号

谨珩工作室 潜水
  • 1发帖数
  • 1主题数
  • 0关注数
  • 0粉丝
开启左侧

微信小程序开发简单教程

[复制链接]
 楼主| 谨珩工作室 发表于 2018-11-3 10:21:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
小程序开发准备

在官网上直接注册小程序账号,可以管理你的小程序的权限,查察数据报表,发布小程序等操作。登录账号,获取对应的小程序的 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 中相同的配置项。
结尾

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

精彩评论11

老赵和他的 发表于 2018-11-3 10:56:44 | 显示全部楼层
转发了
闲云野鹤15884 发表于 2018-11-3 11:10:57 | 显示全部楼层
转发了
一只走丢的存钱罐 发表于 2018-11-3 11:21:43 | 显示全部楼层
转发了
梦年87003578 发表于 2018-11-3 11:32:53 | 显示全部楼层
转发了
文灬俊 发表于 2018-11-3 11:47:17 | 显示全部楼层
转发了
帝皇商行 发表于 2018-11-3 12:35:50 | 显示全部楼层
转发了
班一一 发表于 2018-11-3 13:21:03 | 显示全部楼层
转发了
ls3038 发表于 2018-11-3 14:15:02 | 显示全部楼层
转发了
ls3038 发表于 2018-11-3 14:16:01 | 显示全部楼层
转发了
猜你喜欢
在线客服QQ
2241998733

24x7小时免费咨询

  • 官方在线客服

    在线客服:官方

    点击交谈

    在线客服:良子

    点击交谈

    在线客服:闵月

    点击交谈
  • https://t.me/wxcydzcc

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方博客

    cydz.eu.org

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城繁体中文