最简单的微信小程序Demo-小程序开发-PHP中文网

这里提供给大家一个最简单的微信小程序示例demo。
用到了倒仰样式、text组件、view组件和js代码的交互，大家要理解wxml、js、wxss和json文件的用途及相互关系。
新建项目，然后在index.wxml页面中创建相关控件


  
    点我点我
  


  
    {{motto}}

然后在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'
})
},

设置导航样式，需要在app.json中进行设置
最简单的微信小程序Demo

效果展示：最简单的微信小程序Demo

百家CMS微商城

百家CMS微商城从诞生开始，就坚持着简单实用的原则，基于目前最流行的WEB2.0的架构（php+mysql），拥有成熟、稳定的微电商技术解决方案。基于完整的会员等级制度，完善的微商城购物流程，订单管理、优惠券、搜索、购物车等功能。采用跨平台机制，可同时对接微信公众号平台和支付宝服务窗，兼容微博、手机QQ等平台；丰富的支付方式、支持微信支付、支付宝支付、货到付款、余额支付、网银支付等。并且拥有完整的

下载

最简单的微信小程序Demo