最简单的微信小程序Demo（最简单的微信小程序怎么做）

最简单的微信小程序Demo（最简单的微信小程序怎么做）

这里提供给大家一个最简单的微信小程序示例Demo。

用到了倒仰样式、Text组件、View组件和js代码的交互，大家要理解WXML、JS、WXSS和JSON文件的用途及相互关系。

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

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

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

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

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。