最简单的微信小程序Demo示范

这里提供给大家一个最简单的 微信 小程序示例Demo。
用到了倒仰样式、Text组件、View组件和JS代码的交互，大家要理解WXML、JS、WXSS和JSON文件的用途及相互关系。


新建项目，然后在index.wxml页面中创建相关控件

[XML] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10

<!--创建一个蓝色背景的View，添加点击事件,并输出启动日志-->    < view  bindtap = "bindViewTap" class = "myView" >      < text class = "myView-clickK" >点我点我</ text >    </ view >   <!--创建了一个text标签，然后执行了JS交互，通过两个大括号，在index.js中进行赋值-->    < view class = "usermotto" >      < text class = "user-motto" >{{motto}}</ text >    </ view > </ view >

然后在index.wxss文件中设计控件位置和属性样式，注意：
/**rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，
则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。开发建议：
开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。UI设计图建议：使用
设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出
来的尺寸是多少px就是多少rpx**/
具体代码如下：

[CSS] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.myView{    width : 200 rpx;    height : 200 rpx;    margin-top : -100 rpx;    background-color : blue ; } .myView {    display : flex;    flex- direction : column;    align-items: center ;    width : 200 rpx;    height : 200 rpx;    margin : 20 rpx;    border-radius: 50% ; } .myView-clickK {    margin-top : 75 rpx;    height : 50 rpx;    color : red ; } .usermotto {    margin-top : 100 rpx; }

对应页面的交互功能逻辑写在index.js文件中，如下所示：

[JavaScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8 9

data: { motto: 'Hello World，你好，世界！' }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) },

设置导航样式，需要在app.json中进行设置


效果展示：


打击可以看到，当我们点击蓝色区域的【点我点我】，在其下方会出现'Hello World，你好，世界！'这些文字。这就是最简单的触碰事件及其处理效果的示例。

更多内容，请关注后续的教程。