小程序开发文档

新建一个 components 文件夹，用于存放我们以后开发中的所用组件，例如目的是实现一个 弹框 组件，因此，在 components 组件中新建一个 Dialog 文件夹来存放弹窗组件，在 Dialog 下右击新建 Component 并命名为 dialog 后，会生成对应的 json wxml wxss js 4个文件，也就是一个自定义组件的组成部分，此时项目结构应该如下图所示： 1.需要声明自定义组件，也就是将 dialog.json 中 component 字段设为 true { "component" : true , // 自定义组件声明 "usingComponents" : {} // 可选项，用于引用别的组件 } 2.需要在 dialog.wxml 文件中编写弹窗组件模版，在 dialog.wxss 文件中加入弹窗组件样式，它们的写法与页面的写法类似 dialog.wxml 文件: <!--component/dialog/dialog.wxml--> <view class = 'wx_dialog_container' hidden = "{{!isShow}}" > <view class = 'wx-mask' ></view> <view class = 'wx-dialog' > <view class = 'wx-dialog-title' > {

今天开发微信小程序，在微信小程序的开发文档中，找组件，发现没有table组件。当时我的那个心情呀，各种不爽。于是，我打算自己写几个<text></text>来代替表格吧。然后就不小心看到了 rich-text ，官方给出的名称叫富文本。我仔细一看，它居然就是我苦苦找了很久的table： 1.受信任的HTML节点及属性 2.全局支持class和style属性， 不支持id属性 。 具体应用： wxml上需要写代码： <rich-text nodes="{{nodes}}" bindtap="tap" ></rich-text> JS上需要写代码： data：{ nodes: [{ //表格配置 name: "table", attrs: { style: " text-align: center", }, children: [ { name: "thead", attrs: { style: "border:1px solid #000;color:red", class: "red" }, children: [ { name: "tr", attrs: { style: "border:1px solid #000;color:red", class: "red" }, children: [ { name: "th", attrs:{}, children:[{ type:

/约定/ 让我们轻装上阵 一个功能页（Page）的开发通常需要四大块：配置、代码、布局、样式。 这四大块承载不同的方面，要独立不混杂，又要整体融合。于是有了以下约定： 每一块 --> 独立的文件、相同的文件名、不同的扩展名。 按约定行事，自动融合。 于是，一个小程序的功能页 Page，就这样形成了。 index.json index.js index.wxml index.wxss 而 app.js，app.json，app.wxss 则作为全局定义。 再继续来看代码部分 它少不了这三大块：数据、生命周期、功能过程。 不需要额外的配置，约定一种结构方式即可。 Page({ data, on阶段, func... }) 再来看四大块中的交互 通过约定之后，可谓我中有你，你中有我，wxss 定义的名称，wxml 可以根据需要使用，js 定义的数据，wxml 可以灵活呈现，数据变，呈现自动变。 常用表达 1.点击事件 通过 bindtap 属性指定一个功能函数名称即可。以下示例中， {{ msg }} 绑定代码中定义的数据属性 msg，按钮点击事件，执行代码中的 clickMe 功能函数，它改变了 msg 的值，则页面也会相应的呈现新的值。 <view>{{ msg }}</view> <button bindtap="clickMe">点击我</button> Page({ data:

云数据库 初始化数据库: const db=wx.cloud.database();//初始化数据库 然后在云开发的,数据库里添加一个集合,也就是创建一个表 然后就可以对云数据库进行代码中的增删改查.官方文档相当齐全,大家移步官方文档. 云数据库官网 来源： CSDN 作者： 胡老大的唯一大老婆 链接： https://blog.csdn.net/wangjjz/article/details/103244638

1 在vant weapp开发文档上选择要使用的组件 https://youzan.github.io/vant-weapp/#/intro 2 从vant weapp上复制代码，由于是用npm安装的所以路径可以简略 { "usingComponents": { "van-field": "vant-weapp/field" } } <!--引入vant组件库--> <van-cell-group> <van-field value="{{ value }}" placeholder="请写评价" border="{{ false }}" bind:change="onCommentChange" /> </van-cell-group> /** * 页面的初始数据 */ data: { detail: {}, comment:''//评价的内容 }, //事件处理函数，当评价改变时调用 onCommentChange: function (event){ }, 3 得到页面 4 来源： https://www.cnblogs.com/polax/p/11543646.html

完成工作：网上查阅了开发小程序的文档，学习了视频教程，制作了一部分小程序界面。 明日计划：继续完成首页剩余界面的制作，学习制作模拟数据，便于小程序的调用。 小结：在进行页面制作时遇到很多比如如何设置导航栏、如何设置布局样式等小问题，在官方文档中查阅后找到了相应的代码。 来源： https://www.cnblogs.com/emiya471/p/11405966.html

1、注册小程序： https://mp.weixin.qq.com 2、获取开发者ID 点击左边导航栏 开发-开发设置，可以查看AppID，开发时需要用到 3、下载开发工具 链接： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 打开后选择合适你电脑的工具下载，我的是Windows64 4、安装打开开发工具，新建项目 这里就需要用到前面获取的AppID，填入保存就可以创建项目了 接下来就是靠自己写代码了，项目例会有一下代码模板，具体开发指南可以查看官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 来源： https://blog.csdn.net/sinat_34209942/article/details/99321860

　　看看音乐播放组件是如何实现完成的音乐的播放的！！！ 一、音乐music组件的开发 1、页面以及页面样式的开发 1 // music组件页面开发 2 <view hidden="{{hidden}}" class="container"> 3 <image class="classic-img {{playing?'rotation':''}}" src='{{img}}'/> 4 <image class="player-img" bind:tap="onPlay" src='{{!playing?playSrc:pauseSrc}}' /> 5 <image class="tag" src='images/music@tag.png' /> 6 <text class="content">{{content}}</text> 7 </view> 8 9 // 样式的开发 css代码 10 .container{ 11 display: flex; 12 flex-direction: column; 13 align-items: center 14 } 15 16 .classic-img{ 17 width: 422rpx; 18 height: 422rpx; 19 margin-top: 60rpx; 20 border-radius: 50%; 21 } 22 23